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

Posted 2023-02-21

【中文标题】如何调试反应路由器未在 url 更改时加载组件

【英文标题】：how to debug react router not loading component on url change

【发布时间】：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>

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

【参考方案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。