如何在反应路由器dom v4中获取组件中的参数？

Question

我有这个代码:

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

根据以前的路由器版本,过滤器参数或"根"假设是在App组件的道具上吗？

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

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,但它没有？救命？

Answer 1

我假设您正在关注Egghead.io上的Redux教程,因为您的示例代码似乎使用了该视频系列中定义的内容.我也试图整合React Router v4,但最终找到了一个与你尝试过的距离不远的工作解决方案.

⚠️注意:我在这里检查的一件事是你使用的是当前版本react-router-dom(4.1.1在撰写本文时).我在v4的某些alpha和beta版本的params中遇到了一些可选过滤器的问题.

首先,这里的一些答案是不正确的,你确实可以在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系列中进行了讨论,所以我不会在这里重述它们.

如果您仍然遇到问题,我建议您查看该系列中已完成的应用程序的存储库.

• 这是使用mapStateToProps解决方案的提交
• 这是使用withRoutersoluiton 的提交

这两个似乎都很好(我刚刚测试了它们).

Answer 2

React Router v4不接受路径的正则表达式.您不会在文档中的任何位置找到正则表达式.您可以在<Switch>组件内部创建多个路径,而不是正则表达式,并且将呈现匹配的第一个路径:

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

您的App组件中也存在错误.你通过匹配属性获得params,而不是params属性(未经测试,但这应该更接近你想要的):

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

以上所有内容都包含在模糊匹配的React Router V4文档中