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

Question

我使用的是react-router-dom version4.3.1，单击链接后，URL会发生变化，但不会呈现React组件（事实上，调试器不会在代码中的任何位置停止）。我已经尝试使用withcomponent和except关键字，但这并不起作用。在以下两种解决方案中提到了它：React router更改url，但不查看；React route使用browserhistory更改url，但什么也不发生；它唯一起作用的时候是使用refresh按钮刷新页面。我正在index.js中的根元素中加载路由器：

reactdom.render( ,document.getElementById（“root”））；

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>

有趣的是，它还在工作，但在我重新排列组件的加载顺序后，它就停止工作了。如何调试？谢了。

Answer 1

在路由器中嵌套路由器会导致这种问题。单击 后，您将更新顶部 元素中的历史堆栈，而不是 元素中的历史堆栈。我认为，如果删除内部 ，一切都应该开始工作。

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>
    </>
  );
};