react-router - react 路由器 Prop `location`/ `match` 未更新为 `ConnectedRouter`

Question

我在文档中设置了我的应用程序:

第1步

...
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'))
然而 Prop 为match location保留以前的值或第一页的任何内容。

怎么了？

Answer 1

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

您的 Switch和 Route等必须不是 在连接的组件中!

如果组件已连接，则 Prop 为 match , location等似乎没有更新并传播到您的路线。

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

更新:

您可能只需要用

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