如何在反应路由器 dom v4 的组件中获取参数? [英] How to get params in component in react router dom v4?

问题描述

我有这个代码:

<路由路径="/(:filter)?"组件={应用}/></BrowserRouter>

根上的过滤器参数或 '' 假设基于以前的 react 路由器版本在 App 组件的 props 上?

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

const App = ({params}) =>{return (//解构 props 上的参数<div><添加待办事项/><VisibleTodoList过滤器={params.filter ||'all'}//我想在 root 上 git filter param 或分配 'all'/><页脚/>

);}

我在控制台上记录了 this.props.match.params 但它没有?帮助?

解决方案

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

<块引用>

⚠️ 注意:我要在这里检查的一件事是您正在使用react-router-dom 的当前版本(4.1.1 在这个时间写作).我在参数中的可选过滤器有一些问题v4 的一些 alpha 和 beta 版本.

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

<路由路径="/:filter?"组件={应用}/></BrowserRouter>

第二，正如其他人所指出的，React Router v4 不再在路由处理程序组件上公开 params，而是为我们提供了一个 match 属性供我们使用.

const App = ({ match }) =>{返回 (<div><添加待办事项/><VisibleTodoList filter={match.params.filter ||'全部'}/><页脚/>

)}

从这里开始，有两种方法可以使您的内容与当前路由保持同步:使用 mapStateToProps 或使用 HoC withRouter，这两种解决方案都已在Egghead 系列，所以我不会在这里重述.

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

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

这两个看起来都很好(我刚刚测试了它们).

I have this code:

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

the filter param or '' on the root is suppose to be on App components' props base on the previous react router versions?

This is my code on my 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>
    );
}

I logged this.props.match.params on console but it has none? help?

解决方案

I assume you are following the Redux tutorial on Egghead.io, as your example code seems to use what is defined in that video series. I also got stuck on this part trying to integrate React Router v4, but eventually found a working solution not far from what you have tried.

⚠️ NOTE: one thing I would check here is that you are using the current version of react-router-dom (4.1.1 at the time of this writing). I had some issues with optional filters in the params on some of the alpha and beta versions of v4.

First, some of the answers here are incorrect, and you indeed can use optional params in React Router v4 without the need for regular expressions, multiple paths, archaic syntax, or using the <Switch> component.

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

Second, as others have noted, React Router v4 no longer exposes params on route handler components, but instead gives us a match prop to use.

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

From here, there are two ways to keep your content in sync with the current route: using mapStateToProps or using the HoC withRouter, both solutions are already talked about in the Egghead series so I won't recapitulate them here.

If you are still having trouble, I urge you to check out my repository of the completed application from that series.

• Here is the commit using the mapStateToProps solution
• Here is the commit using the withRouter soluiton

Both of which seem to work fine (I just tested both of them).

这篇关于如何在反应路由器 dom v4 的组件中获取参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！