嵌套路由器中的链接无法导航到父路由器的路由答案

【问题标题】：Link in nested Router can't navigate to a route of the parent Router嵌套路由器中的链接无法导航到父路由器的路由
【发布时间】：2021-03-05 14:50:08
【问题描述】：

我有一个嵌套路由器，但我的嵌套路由器无法路由到父路由器的路由。

嵌套路由器中的链接不起作用。它在 url 中显示 /admin，但不会路由到 AdminPage。当我重新加载页面时，它可以工作。到 AdminPage 的未嵌套链接按预期工作。

那么我怎样才能有一个链接到父路由器的路由？

这是我的代码：

function App() {

  return <BrowserRouter>
      <div>
          <nav>
              <ul>
                  <li>
                      <Link to={`/admin`}>Admin</Link>    <-- does work
                  </li>
                  <li>
                      <Link to={`/`}>School</Link>
                  </li>
              </ul>
          </nav>
      </div>
      <Switch>
          <Route path="/admin">
              <AdminPage></AdminPage>
          </Route>
          <Route exact path={"/"}>
              <BrowserRouter>
                  <div>
                      <nav>
                          <ul>
                              <li>
                                  <Link to="/">Home</Link>
                              </li>
                              <li>
                                  <Link to="/profile">Profile</Link>
                              </li>
                              <li>
                                  <Link to="/admin">Admin</Link>    <-- does not work
                              </li>
                          </ul>
                      </nav>
                  </div>
                  <Switch>
                      <Route path="/profile">
                          <h1>Profile</h1>
                      </Route>
                      <Route exact path="/">
                          <h1>Home Page</h1>
                      </Route>
                  </Switch>
              </BrowserRouter>
          </Route>
      </Switch>
  </BrowserRouter>
}

export default App;

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

为什么你有第二个<BrowserRouter>？

据我所知，您可以将<Route> 相互嵌套。 <BrowserRouter> 在所有路线中只需要一次。在您的示例中，您甚至不需要嵌套任何内容。

另请参阅react router nesting 的文档

【讨论】：