如何在React Router dom v4中获取组件中的参数？

小编典典

如何在React Router dom v4中获取组件中的参数？

reactjs

我有以下代码：

<BrowserRouter>
   <Route  path="/(:filter)?" component={App} />
</BrowserRouter>

根上的filter param或’‘是否假定基于以前的React Router版本在App组件的props上？

这是我在应用程序上的代码：

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

我在控制台上记录了this.props.match.params，但没有？救命？

阅读 329

2020-07-22

共1个答案

小编典典

我假设您正在遵循Egghead.io上的Redux教程，因为您的示例代码似乎使用了该视频系列中定义的内容。我在尝试集成React Router
v4的过程中也遇到了困难，但是最终找到了一个可行的解决方案，与您尝试的相距不远。

NOTE️注意：我要在这里检查的一件事是您使用的是当前版本react-router- dom（4.1.1在撰写本文时）。在某些v4的alpha和beta版本的参数中，可选过滤器存在一些问题。

首先，这里的一些答案是不正确的，您确实可以在React Router
v4中使用可选参数，而无需正则表达式，多个路径，过时的语法或使用<Switch>组件。

<BrowserRouter>
  <Route  path="/:filter?" component={App} />
</BrowserRouter>

其次，正如其他人指出的那样，React Router v4不再公开params于路由处理程序组件，而是为我们提供match了使用的道具。

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

从这里开始，有两种方法可以使您的内容与当前路径保持同步：使用mapStateToProps或使用HoC
withRouter，Egghead系列中已经讨论了这两种解决方案，因此在此不再赘述。

如果您仍然遇到问题，我敦促您从该系列中检出已完成应用程序的存储库。

两者似乎都可以正常工作（我只是测试了两者）。

2020-07-22