如何调试反应路由器未在 url 更改时加载组件答案

【问题标题】：how to debug react router not loading component on url change如何调试反应路由器未在 url 更改时加载组件
【发布时间】：2020-04-24 12:32:03
【问题描述】：

我正在使用 react-router-dom 版本 4.3.1 单击链接后，URL 会更改，但不会呈现 React 组件（实际上调试器不会在我的代码中的任何位置停止）。我已经尝试过使用withComponent 和exact 关键字，但效果不佳。在以下两个解决方案中提到： React router changes url but not view 和 react route using browserhistory changes url but nothing happens 它唯一有效的时间是使用刷新按钮刷新页面时。我正在index.js 的root 元素中加载路由器：

ReactDOM.render(<AppRouter />, document.getElementById("root"));

AppRouter 有这个代码：

export const AppRouter = () => {
    return (
        <>
        <HashRouter>
        <div>
        <Switch>
        <Route path="/page1" component={Page1} />
        <Route path="/page1" component={withRouter(Page2)} /> //still doesn't work
        <Route exact path="/" component={Home} />
        </Switch>
        </div>
        </HashRouter>
        </>
        )}

然后在我的页面中：

<Router>
        <div>
        <Link to={'/page1'}>Page 1</Link>
        <Link to={'/page2'}>Page 2</Link>
        </div>
</Router>

有趣的是，它可以正常工作，但是在我调整了组件的加载顺序后，它就停止了工作。我该如何调试呢？谢谢。

【问题讨论】：

标签： reactjs

【解决方案1】：

在路由器中嵌套路由器可能会导致此类问题。点击<Link> 您更新顶部 <Router> 元素中的历史堆栈，而不是 <HashRouter> .我认为如果你删除内部的<Router>，一切都应该开始工作了。

export const AppRouter = () => {
  return (
    <>
      <HashRouter>
        <div>
          <Link to={"/page1"}>Page 1</Link>
          <Link to={"/page2"}>Page 2</Link>
        </div>
        <div>
          <Switch>
            <Route path="/page1" component={Page1} />
            <Route path="/page1" component={withRouter(Page2)} /> //still
            doesn't work
            <Route exact path="/" component={Home} />
          </Switch>
        </div>
      </HashRouter>
    </>
  );
};

【讨论】：

我也跟着这个：flaviocopes.com/react-router 显然你不能在Router 之外有一个Link，React 会抛出一个错误。
没错，你的链接元素是在 page1 还是 page2 里面？我将用一个工作示例更新我的帖子。
我修复了你的沙箱，它们有很多错误。 codesandbox.io/s/…
架构应该是这样的。如果您对结构有更多疑问，可以给我留言。
顺便说一句就像一个开关盒，第一个匹配的路径是要渲染的，所以你应该把“/”放在最后。

【解决方案2】：

页面组件上的<Router> 不是必需的，因为您在另一个组件中定义了<Router>。此外，您可能有一个错字：

        <Route path="/page1" component={Page1} />
        <Route path="/page1" component={withRouter(Page2)} /> //still doesn't work
        <Route exact path="/" component={Home} />

第二行应该有path='/page2'，因为你在component 属性上渲染Page2。

【讨论】：