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

Posted 2023-02-21

【中文标题】如何在反应路由器dom v4中获取组件中的参数？

【英文标题】：How to get params in component in react router dom v4?

【发布时间】：2017-11-12 06:38:57

【问题描述】：

我有这个代码：

<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 但它没有？帮忙？

【问题讨论】：

ReactRouter: Can not read property "imageId" of undefined的可能重复

我想接受它作为重复但我在这里使用正则表达式，我认为这是因为正则表达式没有传递我的参数，我已经记录了 props.match.params 但我得到的只是空的即使我有一个工作的反应路由器，访问位置路径名对我来说也是一样的，所以我必须在我的情况下做必要的事情，但我会很感激建议，因为我必须继续这样做，因为我已经尝试解决这个问题几个小时

【参考方案1】：

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

⚠️ 注意：我要在这里检查的一件事是您正在使用 当前版本的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 系列中讨论过，所以我不会重述它们在这里。

如果您仍有问题，建议您查看我的存储库，其中包含该系列中已完成的应用程序。

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

这两个似乎都可以正常工作（我刚刚测试了两个）。

【讨论】：

This 是从 url 获取参数而无需额外代码的绝佳解决方案。谢谢！

【参考方案2】：

React Router v4 不接受路径的正则表达式。您不会在文档的任何地方找到正则表达式。您可以在 <Switch> 组件内创建多个路由，而不是正则表达式，并且将呈现第一个匹配的路由：

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

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

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

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

【参考方案3】：

从react-router documentation，props.match.params 是您的参数存储位置。

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

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

【讨论】：

从Route 组件中删除正则表达式。让它只是`Route path="/:filter"。

我试过了，但它会使我的应用程序崩溃，我使用它，因为它是一个可选参数，但我不知道为什么即使它正在工作，react router 也无法检测到我的过滤器，我使用位置解决了它。路径名，因为它为我工作

对不起，我误读了文档。如果你做path="/:filter?"呢？所以没有括号，但保留问号。

一样。反应路由器不会检测到

【参考方案4】：

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

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

【参考方案5】：

获取路径 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

【参考方案6】：

我不知道为什么 react router 无法检测到我的过滤器，即使它工作正常，我通过使用 location.pathname 解决了这个问题，因为它为我工作。我认为反应路由器由于正则表达式而无法检测到我的过滤器参数，我希望如此，所以我放了||在 root 上使用 all，但不幸的是我无法检测到，所以我使用了 location.pathname 。我会很感激这方面的建议，因为我不确定我在正则表达式上的路径配置。