React Router无法正常工作且警告：您尝试重定向到您当前所在的相同路线：“/”

Question

我是新的反应路由器，我不能让它正常工作。我正在构建一个具有标题，侧边栏和页脚框架的SPA，并且中央视图应根据所选路径进行更改。

自上而下的DOM层次结构如下：

index.js

render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

App.jsx

render() {
    return (
        <div >
            <Router history={history}>
                <div>
                    <PrivateRoute exact path="/" component={DashboardLayout} />
                    <Route path="/#/login" component={LoginForm} />
                </div>
            </Router>
        </div >
    );
}

Dashboard.jsx

render() {
    if (this.state.toLogin === true) {
        return <Redirect to={{ pathname: '/#/login', state: { from: this.props.location } }} />
    }
    return (
        <div className="app">
            <AppHeader fixed>
                <DefaultHeader/>
            </AppHeader>
            <div className="app-body">
                <AppSidebar fixed display="lg">
                    <AppSidebarHeader />
                    <AppSidebarForm />

                    <AppSidebarFooter />
                    <AppSidebarMinimizer />
                </AppSidebar>
                <main className="main">
                    <Container fluid>
                        <Switch>
                            <Route path="/#/items" name="Items" component={ItemsTable} />
                            <Route path="/#/profile" name="Profile" component={ProfileManager} />
                            <Redirect from="/" to="/#/items" />
                        </Switch>
                    </Container>
                </main>
            </div>
            <AppFooter>
                <DefaultFooter />
            </AppFooter>
        </div>
    );
}

PrivateRoute组件只是检查用户是否已登录，最终重定向到登录表单。

登录后我希望在中央视图中看到（由Container包装）ItemTables视图，但这不会发生。

此外，如果手动导航到/＃/ items或/＃/ profile（通过在浏览器上输入路径或单击UI），Container中的中心视图不会更改。

我收到一个错误说：

Warning: You tried to redirect to the same route you're currently on: "/"

一直和我怀疑它是相关的。

最后我使用的是Redux。

在此先感谢您的帮助。

如果需要，我可以提供更多详细信息。

Answer 1

将它们包裹在Switch而不是div中：

<Router history={history}>
   <Switch>
      <PrivateRoute exact path="/" component={DashboardLayout} />
      <Route path="/#/login" component={LoginForm} />
    </Switch>
 </Router>

当你用额外的#url重定向到相同的路径时，有必要有exact path="/"。你已经拥有它了。这是绝对正确的。当你重定向到相同的路径但使用额外的#hashurl时，确保其他路线也使用精确路径。

---

如何将Switch与div包装起来的路径不同？

/path，/:alias，/path#hashurl和没有路径道具将呈现所有组件，因为它们匹配位置路径。

但是使用Switch时，请确保不要将它们全部包含在内。只需匹配与位置路径匹配的路线。

---

此外，你正在使用没有像path="/#/items"那样拖尾斜线的路径，为了匹配这个你需要将strict和exact道具放在一起。

例：

<Route exact strict strict path="/#/items"

否则，您可能必须使用带斜杠的路径：

<Route exact path="/#/items/"

Answer 2

使用给定的代码重现您的问题有点困难。如果你可以创建一个可能很棒的沙箱。无论如何，我用hashrouter创建了一个沙盒。我想提一件事是你不必提及路线上的＃。

如

<Switch>
  <PrivateRoute exact path="/" component={DashboardLayout} />
  <Route path="/#/login" component={LoginForm} />
</Switch>

可 ：

<Switch>
  <PrivateRoute exact path="/" component={DashboardLayout} />
  <Route path="/login" component={LoginForm} />
</Switch>

hash用作在静态Web应用程序中查找应用程序路径的引用。

如果你想要，你可以在Browserrouter中使用react router

这是一个我从另一个例子中分叉的工作示例。我在这里添加了hashrouter，希望这对你有帮助。

• 请查看<switch>如何用于包裹每条路线
• 并找到如何在示例中实现嵌套路由，如名册

链接：https://codesandbox.io/s/25okp1mny

参考：qazxsw poi