React-Router 5：为什么我的 <A href="foo"> 有效，但我的 <Link to="foo"> 无效？

Question

我认为这是标准路由设置：

<BrowserRouter>
  <Switch>
    <Route component={SubPage} exact path="/sub/path" />
    <Route component={FrontPage} exact path="/" />
  </Switch>
</BrowserRouter>

当我手动导航到 /sub/path 时一切正常。当我单击标准 link (<a href="/sub/path">) 时，它也能正常工作。

但是，当我使用 <Link to="/sub/path">（并单击它）时，我被导航到 /sub/path 的 URL ... 但它的组件未呈现。我没有看到子页面，而是继续看到首页，即使 URL 发生了变化。

如果我刷新页面，或者前后移动，路由器就会启动，但由于某种原因，使用 Link 使其无法呈现路由。谁能告诉我为什么？

Answer 1

路由和链接必须由 BrowserRouter 的同一个实例包装。确保它们在它们的祖先中共享相同的 BrowserRouter 实例。

也不要在您的应用程序中有多个 BrowserRouter 实例或通常的任何路由器

<BrowserRouter>
  <>
   <Link to="/sub/path">SubPage</Link>
   <Link to="/">Home</Link>
  <Switch>
    <Route component={SubPage} exact path="/sub/path" />
    <Route component={FrontPage} exact path="/" />
  </Switch>
  </>
</BrowserRouter>

React-Router 5：为什么我的 <A href="foo"> 有效，但我的 <Link to="foo"> 无效？

React-Router 5: Why is it That My <A href="foo"> Works, But My <Link to="foo"> Doesn't?

reactjs

react-router

react-router-v5