Question

当我使用React-Router <Link>导航到上面带有多个<Switch>的{{1}}组件的页面时，最终匹配的<Route>是我以前使用的路径，而不是当前（新）路径。就像执行在react-router之前知道路径已更改一样。这将导致渲染错误的组件。我在做错什么吗？

react-router-dom版本：4.2.2

示例：

我有一个Header组件，看起来像这样（简化）：

<Route>

在“ /购物车”页面上，我有以下提示：

import { Route, Switch } from 'react-router-dom'

export default (props) => {
  return (
    <Switch>
      <Route
        path='/checkout'
        render={(match, location) => {
          console.log('path:', location.pathname)
          return <CheckoutHeader>
        }}
      />
      <Route
        path='/cart'
        render={(match, location) => {
          console.log('path:', location.pathname)
          return <NormalHeader>
        }}
      />
    </Switch>
  )
}

如果使用URL栏导航到/ cart页面，我会看到Normal标头，并且记录了import { Link } from 'react-router-dom export default (props) => { return ( <Link to='/checkout'>Go to checkout</Link> ) }。

但是，当我单击链接时，普通标题仍然保留，并且再次记录path: /cart。我希望在这里看到path: /cart和结帐标头。

刷新页面可以解决此问题，并用常规的html链接替换React-Router链接也可以解决该问题，但是当然我们必须重新渲染整个页面并丢失我们的redux存储。

使用<Link>导航时，<Route>匹配基于先前的路径

0 个答案: