20

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?

4

6 回答 6

31

我假设您正在关注Egghead.io 上的 Redux 教程，因为您的示例代码似乎使用了该视频系列中定义的内容。我在尝试集成 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 系列中讨论过，所以我不会在这里重述它们。

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

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

于 2017-06-12T22:23:46.683 回答
8

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 match涵盖了以上所有内容

于 2017-06-11T22:12:07.480 回答
2

从react-router文档中，props.match.params是存储参数的位置。

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

const App = ({match}) => {
    ...
    <VisibleTodoList 
        filter={match.params.filter || 'all'}
    />
    ...
}
于 2017-06-10T08:59:20.547 回答
1

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

// /:filter
const {filter} = useParams();
于 2020-08-15T19:29:47.173 回答
1

获取路径 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
于 2020-09-15T06:12:48.157 回答
0

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

于 2017-06-10T09:20:15.400 回答