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

Question

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

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

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