Reactjs 返回按钮后的React路由器“历史记录”和“位置”不匹配

在我的React应用程序中，从主页导航到子页面，然后点击后退按钮后，React

显示其内部状态与从

历史记录中传递的道具不匹配的位置，并且地址栏中当前显示的URL显示不正确的

的内容确实发生了变化；数据通过位置更改Redux操作进行更新。显示的
显示新数据，但它是错误的

应用程序的基本结构是：

<Root>                                  (custom)
  <Provider>                            (react-redux)
    <ConnectedRouter>                   (connected-react-router)
      <App>                             (custom)
        <Switch>                        (react-router-dom)
          <Route path="/" exact />      (react-router-dom)
          <Route path="/quality:q" />   (react-router-dom)

在这种不正确的状态下，
之前的所有内容都是正确的<代码>

有一个单独的道具，它是

历史

，具有正确的位置根

紧靠其下方的

不匹配。它有一个

history

道具可以，但它有一个过时的

位置

处于显示旧url的状态

当坏位置数据被上下文传递到

时，它们从与

的过时状态相匹配的

位置获得要检查的路径。因此，将呈现错误的

我不知道我做了什么导致了这种不匹配。它是所有直接的路由，并使用
组件实现从主页到子页面的所有链接

以前是否有人看到过这一点和/或可以为我指出如何解决此问题的方向

我认为您的路由结构需要重构，因为您正试图匹配（可能是嵌套的）URL

如果您希望
/quality/:id
位于
/
下面，则
路由
需要是
组件
的子级

例如，
路线将是：

<Route path="/" component={Home} />

但是，如果您想要相反的结果，即
/
独立于
/quality/:p
，那么您需要使用
精确的
：

<Switch>
   <Route exact path="/" component={Home} />
   <Route exact path="/quality/:p" component={Quality} />
   <Route exact path="/some/other/route" component={Example} />
<Switch>




工作示例

在本例中，
/home
、
/about
和
/dashboard
是彼此独立的路由；但是，
/dashboard
是这些子路由的父级：
/dashboard/settings
和
/dashboard
（顺序很重要！），并且
/dashboard
呈现的
dashboard
组件恰好也是
/dashboard/profile
子路由的父级！顺序和精确的
对于每个嵌套管线的渲染方式非常重要。我还在
pages/Profile
中包含了一个
goBack
示例，以证明
连接的react路由器
的历史与
react路由器dom
路由历史保持一致




如果您遵循上述约定，那么唯一的另一个问题是，
react hot loader
会阻止状态更改。我个人不使用RHL，因为我发现它相当麻烦，但每个人都有自己的问题。也就是说，在过去的3到4个项目中，我使用了连接的react router，我从未遇到过道具/状态不匹配的情况（除了一些共享的重复使用数据过时，需要在加载另一个重用相同数据结构的组件之前重置）。
如果使用react router 5+，您可以将位置从上范围传递到交换机。我从历史背景中通过。它解决了我的问题
我也有类似的问题。结果是，我的树中有一个
PureComponent
导致了它。在路由器中使用
并将
位置传递到
PureComponent
解决了这个问题

import { withRouter } from "react-router-dom";

const App = withRouter(({ location, children }) => (
  <IntlProvider location={location}>
    {children}
  </IntlProvider>
));

ReactDOM.render(
  <Root>
    <Provider>
      <ConnectedRouter>
        <App>
          <Switch>
            <Route path="/" exact />
            <Route path="/quality:q" />
          </Switch>
        </App>
      </ConnectedRouter>
    </Provider>
  </Root>

从“react router dom”导入{withRouter}；
const App=withRouter（{location，children}）=>(
{儿童}
));
ReactDOM.render(
感谢您的回复。在简化发布消息时，我在根路径上省略了
确切的
关键字，但它存在于原始代码中。我更新了问题以澄清。如果您可以创建一个可复制的codesandbox演示（无需花哨）否则，这将是一个更容易的帮助。同意，如果我可以重新创建，我可能会跟踪它。我从上次已知的工作版本逐行恢复和重新应用，看看是什么造成的。另一个要考虑的是，如果你使用的是一个服务工作者，那么它可能是缓存你的请求。我是事实。g类似的问题，history.location是正确的，但location不是，您能找出原因吗？
<Switch>
   <Route exact path="/" component={Home} />
   <Route exact path="/quality/:p" component={Quality} />
   <Route exact path="/some/other/route" component={Example} />
<Switch>

import { withRouter } from "react-router-dom";

const App = withRouter(({ location, children }) => (
  <IntlProvider location={location}>
    {children}
  </IntlProvider>
));

ReactDOM.render(
  <Root>
    <Provider>
      <ConnectedRouter>
        <App>
          <Switch>
            <Route path="/" exact />
            <Route path="/quality:q" />
          </Switch>
        </App>
      </ConnectedRouter>
    </Provider>
  </Root>