javascript - 将路由器参数传递给深层嵌套组件

Question

以 redux 为例docs关于如何使用 react-router :

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

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

Answer 1

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

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

此处的文档 https://reacttraining.com/react-router/web/api/withRouter