Question

我有这段代码：

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

过滤器参数或根目录上的''假设是基于以前的路由器版本的应用程序组件的道具吗？

这是我在我的应用上的代码：

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 写作）。我在params上遇到了一些可选过滤器的问题 v4的一些alpha和beta版本。

首先，这里的一些答案是不正确的，你确实可以在React Router v4中使用可选的参数，而不需要正则表达式，多个路径，古老的语法或使用{{1组件。

<Switch>

其次，正如其他人所说，React Router v4不再在路由处理程序组件上公开<BrowserRouter> <Route path="/:filter?" component={App} /> </BrowserRouter>，而是为我们提供params道具。

match

从这里开始，有两种方法可以让您的内容与当前路线保持同步：使用const App = ({ match }) => { return ( <div> <AddTodo /> <VisibleTodoList filter={match.params.filter || 'all'} /> <Footer /> </div> ) }或使用HoC mapStateToProps，这两种解决方案都已在Egghead系列中进行了讨论，因此我赢了在这里概括一下。

如果您仍然遇到问题，我建议您查看该系列中已完成申请的存储库。

两者似乎都运行正常（我刚刚对它们进行了测试）。

Answer 2

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

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

您的App组件中也存在错误。你通过match属性获得params，而不是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

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

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中获取组件中的参数？

6 个答案: