将路由器参数传递给深层嵌套组件答案

【问题标题】：Passing down router params to deep nested components将路由器参数传递给深层嵌套组件
【发布时间】：2018-04-20 08:08:00
【问题描述】：

以reduxdocs 中的示例为例，了解如何将其与react-router 一起使用：

const App = ({ match: { params } }) => {
  return (
    <div>
      <AddTodo />
      <VisibleTodoList filter={params.filter || 'SHOW_ALL'} />
      <Footer />
    </div>
  )
}

假设redux 和react-router 都已正确设置，您将如何将路由器参数传递给深度嵌套的组件，比如VisibleTodoList 向下3 层？除了将它传递给从App -> VisibleTodoList -> NestedOne -> ... 开始的每个组件之外，还有其他方法吗？

【问题讨论】：

由于我使用的是react-router-redux，我的第一个猜测是听LOCATION_CHANGE 操作并将filter 添加到状态。这样我可以在嵌套组件中使用容器，从状态中获取过滤器并将其传递给演示组件。有没有更好的解决方案？

标签： javascript reactjs redux react-router

【解决方案1】：

使用 react-router 中的 withRouter()。它将注入路由器参数。 VisibleTodoList.jsx 示例：

import { withRouter } from `react-router`;
const VisibleTotoList = ({ match: { params } }) => { ... }
export default withRouter(VisibleTotoList);

这里有文档https://reacttraining.com/react-router/web/api/withRouter

【讨论】：