我有一个庞大的Django网络应用程序,其中的一个模块(“仪表板”)用node和react编写。用户登录由Django模块处理。
用户应该登录到主应用程序才能访问react仪表板,这部分起作用-代码从浏览器获取用户会话,并且仅在有内容的情况下呈现内容。
我现在想在没有会话的情况下将用户重定向到应用主登录页面,但是我不知道如何使用当前结构(和该血腥的v4路由器)进行操作。
我在BrowserRouter组件中使用基本名称来使用相对于django应用程序中的仪表板路径的路由。
这是我为app.jsx的JSX想到的:
<BrowserRouter basename='/en/dashboard'> {this.state.isAuthenticated ? ( <Paper zDepth={0} style={{ height: '100%', backgroundColor: grey900 }}> <div style={{height: '100%'}}> <Header /> <Switch> <Route exact={true} path='/' component={FirstSection}/> <Route path='/first' component={FirstSection}/> <Route path='/second' component={SecondSection}/> </Switch> </div> </Paper> ) : ( <Redirect to="/en/login"/> )} </BrowserRouter>
但是,它实际上重定向到en/dashboard/en/login。我相信我可以从BrowserRouter中删除’basename’属性,并将其添加到每个随后的Route中,但是如果此模块最终变得更大,它将使路由变得更加困难。有一个更好的方法吗?
en/dashboard/en/login
不幸的是,这是不可能的。如果您使用的是基本名称,则它将在创建href之前添加到每个路径的基本名称中。这history是createBrowserHistory在push和replace方法中使用以下功能的模块中发生的:
history
createBrowserHistory
push
replace
var createHref = function createHref(location) { return basename + (0, _PathUtils.createPath)(location); };
使用push或replace方法。
您可以在该Redirect.prototype.perform方法中找到以下代码块:
Redirect.prototype.perform
if (push) { history.push(to); } else { history.replace(to); }
可以Redirect.js在react-router模块中找到以上内容,这是react-router-dom模块导入然后导出的内容。
Redirect.js
react-router
react-router-dom
做你想做的事,我将创建basename一个const并将其添加到每条路线的路径前面。
basename
这是不幸的没有一个ignoreBasename一个选项<Route />或者<Redirect />,虽然它是可实现的。
ignoreBasename
<Route />
<Redirect />