React-router-dom：链接导致 url 更改，但不加载新组件

Question

我正在努力使用 React Router 创建嵌套路由。 我已经建立了一个在这里不起作用的小样本：

https://codesandbox.io/s/silly-dubinsky-of2mu

基本上我有两条路线，每条路线都有一条子路线： first/first和second/first 。 在FirstFirst组件中，有一个指向第二条路线的链接：

 <Link to="/second/first">go to second first</Link>

问题是单击该链接时，url 会发生变化，但不会加载相应的组件。 刷新后才能看到。

我怎样才能解决这个问题？

Answer 1

您的应用程序中只需要一个路由器组件

由于每次渲染都应用了重定向，您也可能有无限重定向。

我删除了额外的 Router 组件，然后用 Switch 组件包装了您的 First 和 Second 组件，以便只有一部分匹配。 Route 会尝试匹配，如果失败，就会发生重定向。

https://codesandbox.io/s/trusting-wood-nbsg2?file=/src/Second.js

export default function Second() {
  return (
    <div>
      <Switch>
        <Route path="/second/first" component={SecondFirst} />
        <Redirect
          to={{
            pathname: "/second/first"
          }}
        />
      </Switch>
    </div>
  );
}

Answer 2

我点击了您共享的链接，但它没有在浏览器上呈现任何内容。 无论如何，我猜你正在本地机器上运行这个应用程序并使用 localhost:3000 或 127.0.0.1:3000 或任何其他端口。

如果您使用 localhost 配置了您的应用程序，请确保您使用浏览器上的 localhost 来查看您的应用程序。 如果你使用 127.0.0.1 作为配置，你应该在浏览器上使用这个 URL。 我知道他们都是本地主机等等。 但不知何故，它可能会导致您遇到的问题，尤其是对于服务器端呈现的应用程序。