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

【问题标题】：React-router-dom: Link cause the url to change but not the new component to loadReact-router-dom：链接导致 url 更改但不加载新组件
【发布时间】：2020-08-16 01:13:34
【问题描述】：

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

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

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

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

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

我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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>
  );
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

共享链接是一个codesandbox链接，它在浏览器本地运行和构建