Redux 中的 React Router 路由参数
Posted
技术标签:
【中文标题】Redux 中的 React Router 路由参数【英文标题】:React Router Route Params in Redux 【发布时间】:2017-03-15 07:43:11 【问题描述】:使用 redux 和 react 路由器,我想访问组件上的路由参数,而不是路由指定的组件。
我的 react-router、redux 和 react-router-redux 设置如下,我想从我的 redux 存储中访问 reportId 参数。
const history = syncHistoryWithStore(browserHistory, store);
const store = createStore(reducers);
const routes = (
<Router history=history>
<Route path="/" component=MainLayout >
<IndexRoute component=Home />
<Route path="reports">
<Route path=":reportId" component=ReportViewerContainer />
</Route>
</Route>
</Router>
);
ReactDOM.render(
<Provider store=store>router</Provider>,
document.getElementById('root')
);
我尝试连接 react-redux-router 来存储路由状态,但我发现除了活动路由的完整路径之外,redux 内部没有存储任何有用的东西。这让我可以选择从 redux 的路径中解析出 reportId,或者在 redux 中创建我自己的自定义操作并使用我的 ReportViewerContainer 组件中的 componentWillReceiveProps 生命周期方法对其进行更新。一定有更好的办法吗?
【问题讨论】:
【参考方案1】:如果你想访问组件内部的路由参数,最好的方法是使用withRouter
https://egghead.io/lessons/javascript-redux-using-withrouter-to-inject-the-params-into-connected-components
通过上面的例子你会发现更好的理解。
【讨论】:
【参考方案2】:如果你想访问 redux 存储中的路由器,有一个名为 withRouter
(docs) 的 HOC。如果我没记错的话,这会将任何路由器状态作为道具传递给您的组件。
您需要对组件进行的唯一更改是:
import withRouter from 'react-router'
export default withRouter(ReportViewerContainer);
【讨论】:
【参考方案3】:所以我认为您可以使用context 来获取将通过路由器的位置。 (有关其工作原理的链接,请参阅该链接。)这应该为您提供一个坚实的工作方向。
这也可以帮助您顺利进行国际化。
class MyComponent extends React.Component
static contextTypes =
router: React.PropTypes.object
;
render()
// By declaring context type here, and childContextTypes
// on the parent along with a function with how to get it,
// React will traverse up and look for the `router` context.
// It will then inject it into `this.context`, making it
// available here.
【讨论】:
以上是关于Redux 中的 React Router 路由参数的主要内容,如果未能解决你的问题,请参考以下文章
触发 Redux 操作以响应 React Router 中的路由转换
受保护的路由 React Router 4 无法使用存储在 Redux 中的身份验证状态
路由/重定向不在 React Router 4 和 Redux 授权中呈现