时间戳

首页 > 解决方案 > 使用 React，单击后退按钮时，视图正在正确更新，但 URL 未正确更新

javascript - 使用 React，单击后退按钮时，视图正在正确更新，但 URL 未正确更新

问题描述

我正在处理一个 React Redux 项目，并且很难让 URL 正确更新以与单击“返回”按钮时显示的视图保持一致。无论“返回”按钮将您带回何处，URL 始终显示为“仪表板”，即使视图不是“仪表板”也是如此。我对 React 和 Redux 都很陌生（对 Javascript/Typescript 也很陌生），所以我不确定这里到底发生了什么，但在 routes.tsx 文件中有一个 Switch 语句，如下所示：

  <Switch>
    <Redirect exact from="/" to="/Dashboard" />
    {categoryLayouts}
    <CoreLayout exact path="/error" component={ErrorPageComponent} />
    <CoreLayout exact path="/unauthorized" component={UnauthorizedMessageComponent} />
  </Switch>

如果我将“仪表板”更改为另一个视图的名称，那么当您使用“返回”按钮返回时，URL 会显示更改，但显示的视图仍然正确。

我有一种感觉，这是需要进行更改的地方，但我正在努力弄清楚这里到底发生了什么以及如何解决这个问题。

标签： javascriptreact-redux

解决方案

对您的问题的评论已经告诉您为什么它不起作用-> Switch 的直接子代必须是 Route 或 Redirect。

不仅如此，您的“CoreLayout”应该在Router的父级中完成，无论是消耗路由器。路由器应该只负责“路由”-> 单一职责。

如果不能在Router 的父级中完成任何特定的布局，那么在该路由的组件中专门执行该操作，即侧边栏。

推荐阅读