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

Question

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

嵌套路由器中的链接不起作用。它在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;

Answer 1

为什么有第二个<BrowserRouter>？

据我所知，你可以将<Route>嵌套在彼此内部。<BrowserRouter>在所有路线周围只需要一次。在你的例子中，你甚至不需要嵌套任何东西。

另请参阅文档以反应路由器嵌套