react-router - React Router props `location` / `match` 未使用 `ConnectedRouter` 更新
问题描述
我已经按照文档设置了我的应用程序:
步骤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'))
但是,道具match
location
保留了以前的值或第一页的任何内容。
怎么了?
解决方案
这个已经咬过我很多次了。
您的Switch
等Route
不得位于连接的组件内!
如果组件已连接,则 , 等的道具match
似乎location
不会更新并传播到您的路线。
这意味着不要在and之间连接您的顶层App
orRoot
或任何其他嵌套容器ConnectedRouter
Route
--
更新:
您可能只需要用
<Route render={ (routerProps) => <YourConnectedComponent { ...routerProps } />
推荐阅读
- linq - LINQ-加入子查询
- javascript - 更改工具栏中的图标缩放 react-apexchart
- scala - 如何获得哈希图Scala的值的可能对组合
- ffmpeg - 从视频中提取缩略图以创建精灵在大型视频上真的很慢
- ionic-framework - 旋转到横向离子4 IOS时半白屏
- python - 错误“IndexError:如何使用 Keras 中的训练模型预测输入图像?
- angular - Angular:尝试执行嵌套订阅
- python - 如何将项目添加到 OrderedDict
- python - 如何从另一个文件python kivy导入方法?
- blazor - 布雷泽; 创建一个包含可能链接的列表