如何在反应路由器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

我假设您正在关注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

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

Answer 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

Answer 3

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

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

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

Answer 4

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

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

Answer 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

Answer 6

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