reactjs - 后退按钮后 react 路由器 `history` 和 `location` 不匹配

Question

在我的 React 应用程序中，从主页导航到子页面然后点击后退按钮后，React <Router>显示其内部状态与从 history 传递的 Prop 不匹配的位置和不正确的 <Route>在地址栏中显示当前显示的 URL
<Route>的内容做改变；数据由位置更改 Redux 操作更新。显示 <Route>显示新数据，但错误 <Route> .

应用程序的基本结构是:

<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)

最初我们导航到 root 和 <Route path="/>正确显示。我们点击一​​个链接，正确地将我们带到 <Route path="/quality/:q" /> .从那里我们返回浏览器，URL 更改为 /但是 <Route path="/quality:q" />仍然显示，但不应该再显示了。

Redux devtools 展示了这个渲染树，其中我包含了一些我们已经明确使用的关键组件。

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

当处于这种不正确的状态时，一切都到 <ConnectedRouter>是正确的。 <ConnectedRouter>有一个 Prop 是 history具有正确位置的根。
<Router>紧接其下方是不匹配的。它有一个 history Prop 没问题，但它已经过时了 location在显示旧网址的状态。

当错误位置数据被上下文传递给 <Route> 时s 他们从他们的 location 获得要检查的路径匹配的 Prop <Router>的陈旧状态。结果报错 <Route>被渲染。

我无法弄清楚我做了什么导致这种不匹配。都是直截了当的路线和用途 <Link>从主页到子页面和返回的所有链接的组件。

有没有人以前见过这个和/或可以指出我如何解决这个问题的方向？

Answer 1

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

如果你想要 /quality/:id落在下面/ ，然后是 Route需要是 component 的 child .

例如，Route将是:

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

然后在 Home里面组件，你会有 child Route s 使用 match.url ( route props ) 作为字符串匹配器:

const Home = ({ match: { url } }) => (
 <>
  <div>Home<Home>
  <Switch>
    <Route path={`${url}quality/:q` component={Quality} />
    <Route path={`${url}some/other/route`} component={Example} />
  </Switch>
 </>
);

但是，如果您想要相反的情况，其中 /独立于 /quality/:p ，那么你需要使用 exact :

<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 的父组件的组件 child 路线!订购和 exact对如何呈现每个嵌套路由很重要。我还包含了一个 goBack里面的例子 pages/Profile证明 connected-react-router的历史记录与 react-router-dom 保持一致路由历史路由。

demo

source

如果您遵循上述约定，那么唯一的其他问题就是 react-hot-loader正在阻止状态更改。我个人不使用 RHL，因为我发现它有很多问题，但每个人都有自己的。也就是说，我用过 connected-react-router在过去的 3 或 4 个项目中，我从未遇到过 props/state 不匹配(除了一些共享的 redux 数据过时并且需要在加载另一个重复使用相同数据结构的组件之前重置)。