【问题标题】：React Router props `location` / `match` not updating with `ConnectedRouter`React Router props `location` / `match` 未使用 `ConnectedRouter` 更新
【发布时间】：2019-01-24 23:43:25
【问题描述】：

我已经按照文档设置了我的应用程序：

第一步

...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
...
const history = createBrowserHistory()

const store = createStore(
  connectRouter(history)(rootReducer), // new root reducer with router state
  initialState,
  compose(
    applyMiddleware(
      routerMiddleware(history), // for dispatching history actions
      // ... other middlewares ...
    ),
  ),
)

第 2 步

...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4
import { ConnectedRouter } from 'connected-react-router'
...
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <div> { /* your usual react-router v4 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)

我点击Link 甚至dispatch(push('/new-url/withparam'))

但是，match location 的 props 仍然保留以前的值或第一页的任何值。

发生了什么？

【问题讨论】：

标签： react-router react-redux react-router-dom connected-react-router

【解决方案1】：

这个已经咬过我很多次了。

您的 Switch 和 Route 等必须不位于连接的组件内！

如果组件已连接，match、location 等的 props 似乎不会更新并传播到您的路由。

这意味着不要连接您的顶级App 或Root，或ConnectedRouter 和Route 之间的任何其他嵌套容器

更新：

你可能只需要用

包装你的组件

<Route render={ (routerProps) => <YourConnectedComponent { ...routerProps } />

【讨论】：

谢谢。让我开心。
您能否按照您的问题发布示例代码？

【解决方案2】：

我决定在这里添加示例，因为我认为这是有价值的输入 - 即使它已经得到了回答。

我遇到了类似的问题，当我将 url 推送到路由器历史记录时，它更改了 URL，但它没有在我想要的组件上正确导航。我用谷歌搜索并搜索了几个小时的答案，直到我找到了这个线程，它最终帮助我找出了我做错了什么。所以所有的功劳都归功于@ilovett。

所以这里是一个例子，如果有人需要它来更好地理解：

我有类似这样的代码：

export const routes =
    <Layout>
        <Switch>
            <Route exact path='/' component={ Component1 } />
            <Route path='/parameter1/:parameterValue' component={ Component2 } />
        </Switch>
    </Layout>;

<Provider store={ store }>
    <ConnectedRouter history={ history } children={ routes } />
</Provider>

当我来到一个项目时，它工作正常，但后来我决定重构 Layout 组件，我将它连接到商店，这导致 Component2 停止接收正确ownProps.match.params.parameter1 中的值，因此它使组件完全错误。

所以你唯一需要做的就是将布局移到ConnectedRouter之外。 ConnectedRouter 和 Route 之间没有任何东西可以连接到 store。

工作示例是这样的：

export const routes =
        <Switch>
            <Route exact path='/' component={ Component1 } />
            <Route path='/parameter1/:parameterValue' component={ Component2 } />
        </Switch>;

<Provider store={ store }>
    <Layout>
        <ConnectedRouter history={ history } children={ routes } />
    </Layout>
</Provider>

【讨论】：