Question

我有一个巨大的Django网络应用程序，其中一个模块（一个＆＃39;仪表板＆＃39;）用节点编写并做出反应。用户登录由Django模块处理。

用户应登录主应用程序以访问反应仪表板，这部分有效 - 代码从浏览器获取用户会话，只有有东西才能呈现。

如果没有会话，我现在想要将用户重定向到主应用登录页面，但我不知道如何使用我当前的结构（以及这个血腥的v4路由器）来做这件事。

我在BrowserRouter组件中使用basename来使用相对于django app中仪表板路径的路由。

这是我为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。我相信我可以删除＆＃39; basename＆＃39;来自BrowserRouter的属性并将其添加到每个后续Route，但如果此模块最终变大，则会使路由更难。有更好的方法吗？

Answer 1

不幸的是，这是不可能的。如果您使用的是基本名称，则会在创建href之前将其添加到每个路径的基础。这种情况发生在使用以下函数的history和createBrowserHistory方法的push replace模块中：

var createHref = function createHref(location) {
    return basename + (0, _PathUtils.createPath)(location);
};

使用push或replace方法。

您可以在Redirect.prototype.perform方法中找到以下代码块：

if (push) {
  history.push(to);
} else {
  history.replace(to);
}

以上内容可以在Redirect.js模块的react-router中找到，react-router-dom模块导入然后导出。

要做你正在尝试做的事情，我会将basename作为const并将其添加到每条路线的路径前面。

很遗憾，ignoreBasename或<Route />没有<Redirect />选项，但可以实现。

Answer 2

正如凯尔（Kyle）的回答中所述，没有办法必须使用绝对URL或忽略基名。但是，如果您希望或“需要”从组件的render方法运行重定向，则可以创建自己的超轻型“绝对重定向”组件，这是我的：

import React from 'react'

class AbsoluteRedirect extends React.Component {

    constructor(props){
        super(props)
    }

    componentDidMount(){
        window.location = this.props.to
    }

    render(){
        return null
    }

}

export default AbsoluteRedirect

然后将其与条件一起用于其他组件，以便仅在您的验证为true时才挂载它。

render(){ 

    if( shouldRedirect )
        return <AbsoluteRedirect to={ anotherWebsiteURL } />

    ...

}

希望这会有所帮助：）

Answer 3

您可以在不使用路由器的情况下完成此操作：

window.location.pathname = '/en/login';

使用以下导航到另一个站点：

window.location.href = 'https://stackoverflow.com';

如何使用react-router v4重定向到绝对路径？

3 个答案: