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

Question

我有这个代码：

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

根据以前的 React 路由器版本，根上的过滤器参数或“”是否应该在 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 但它有 none？有帮助吗？

Answer 1

从 react-router documentation 开始，props.match.params 是您存储参数的地方。

所以要访问过滤器名称，试试这个

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

Answer 2

我不知道为什么反应路由器无法检测到我的过滤器，即使它工作正常，我通过使用 location.pathname 解决了这个问题，因为它为我工作。我认为 React 路由器由于正则表达式无法检测到我的过滤器参数，我预料到了所以我放了 ||在 root 上使用所有，但不幸的是我无法检测到所以我使用了 location.pathname 。我将不胜感激关于此的建议，因为我不确定我在正则表达式上的路径配置。

Answer 3

React Router v4 不接受路径的正则表达式。您不会在文档中的任何地方找到正则表达式。除了正则表达式，您还可以在 <Switch> 组件内创建多个路由，第一个匹配的路由将被渲染：

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

您的 App 组件中也存在错误。您通过匹配属性获得参数，而不是参数属性（未测试，但这应该更接近您想要的）：

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

以上所有内容都包含在 React Router V4 docs on ambiguous matches

Answer 4

我假设您正在关注 Redux tutorial on Egghead.io，因为您的示例代码似乎使用了该视频系列中定义的内容。我在尝试集成 React Router v4 时也卡在了这部分，但最终找到了一个与您尝试过的相差不远的可行解决方案。

⚠️ 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.

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

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

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

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

从这里开始，有两种方法可以使您的内容与当前路由保持同步：使用 mapStateToProps 或使用 HoC withRouter，两种解决方案都已在 Egghead 系列中讨论过，因此我不会在这里重述它们。

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

两者似乎都工作正常（我刚刚测试了它们）。

Answer 5

我知道问题是关于 v4，但如果 sm 寻找 v5，我们可以使用 useParams 钩子。

// /:filter
const {filter} = useParams();

Answer 6

获取路径中的参数URL

//to your route component  
<Route path={`${match.url}/upload/:title`} component={FileUpload}/> 
=====
//Parent component
<Link to={`${match.url}/upload/css`}>  
=====
//Child component  
const {params: {title}} = this.props.match;
console.log(title);

result = css

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

How to get params in component in react router dom v4?

javascript

reactjs

react-router

react-router-v4

react-router-dom