React Router props `location` / `match` 不使用 `ConnectedRouter` 更新
React Router props `location` / `match` not updating with `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
等的道具似乎不会更新并传播到您的路线。
这意味着不要连接顶层 App
或 Root
,或 ConnectedRouter
和 Route
之间的任何其他嵌套容器
--
更新:
您可能只需要用
包装您的组件
<Route render={ (routerProps) => <YourConnectedComponent { ...routerProps } />
我决定在此处添加示例,因为我认为这是有价值的输入 - 即使如此,它已经得到解答。
我遇到了类似的问题,当我将 url 推入路由器历史记录时,它发生了变化 URL 但它没有在我想要的组件上正确导航。我用谷歌搜索并搜索了几个小时的答案,直到找到这个线程,它最终帮助我找出了我做错了什么。所以所有功劳都归功于@ilovet。
所以这是一个例子,如果有人需要它来更好地理解:
我有类似的代码:
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 中接收正确的值,因此它使组件完全错误。
所以您唯一需要做的就是将 Layout 移到 ConnectedRouter 之外。 ConnectedRouter 和 Route 之间的任何内容都不能连接到商店。
工作示例是这样的:
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>
我已经按照文档设置了我的应用程序:
第 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
等的道具似乎不会更新并传播到您的路线。
这意味着不要连接顶层 App
或 Root
,或 ConnectedRouter
和 Route
--
更新:
您可能只需要用
包装您的组件<Route render={ (routerProps) => <YourConnectedComponent { ...routerProps } />
我决定在此处添加示例,因为我认为这是有价值的输入 - 即使如此,它已经得到解答。
我遇到了类似的问题,当我将 url 推入路由器历史记录时,它发生了变化 URL 但它没有在我想要的组件上正确导航。我用谷歌搜索并搜索了几个小时的答案,直到找到这个线程,它最终帮助我找出了我做错了什么。所以所有功劳都归功于@ilovet。
所以这是一个例子,如果有人需要它来更好地理解:
我有类似的代码:
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 中接收正确的值,因此它使组件完全错误。
所以您唯一需要做的就是将 Layout 移到 ConnectedRouter 之外。 ConnectedRouter 和 Route 之间的任何内容都不能连接到商店。
工作示例是这样的:
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>