reactjs 为什么我< A href="foo">的作品,但我< Link to="foo">的不?

iszxjhcz  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(144)

我有一个我认为是标准的路由设置:

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

当我手动导航到/sub/path时,一切正常。当我点击一个标准链接(<a href="/sub/path">)时,它也工作得很好。
然而,当我使用<Link to="/sub/path">(并点击它)时,我被导航到/sub/path的URL...但不呈现其组件。而不是看到子页面,我继续看到首页,即使网址的变化。
如果我刷新页面,或者向前和向后,路由器就会启动,但是由于某种原因,使用Link使它无法呈现路由。谁能告诉我为什么?

nxagd54h

nxagd54h1#

路由和链接必须由BrowserRouter的同一示例 Package 。确保它们在各自的目录中共享同一个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>

相关问题