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

Question

我有一个庞大的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中，但是如果此模块最终变得更大，它将使路由更难。有一个更好的方法吗？

Answer 1

不幸的是，这是不可能的。如果您使用的是 basename，它将在创建 href 之前添加到每个路径的 base 中。这发生在使用以下函数的和方法中的history模块中：createBrowserHistorypushreplace

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一个常量并将它添加到你的每条路线的路径前面。

不幸的是ignoreBasename， a <Route />or没有选项<Redirect />，尽管它是可以实现的。