我有这个代码：
<BrowserRouter>
<Route path="/(:filter)?" component={App} />
</BrowserRouter>
根上的过滤器参数或 '' 假设基于以前的react-router版本在应用程序组件的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 但它没有？帮助？
我假设您正在关注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可以使用的prop。
const App = ({ match }) => {
return (
<div>
<AddTodo />
<VisibleTodoList filter={match.params.filter || 'all'} />
<Footer />
</div>
)
}
从这里开始，有两种方法可以使您的内容与当前路线保持同步：使用mapStateToProps或使用 HoC withRouter，这两种解决方案都已在 Egghead 系列中讨论过，因此我不会在这里重述它们。
如果您仍然遇到问题，我强烈建议您查看我的该系列已完成应用程序的存储库。
两者似乎都可以正常工作（我刚刚测试了它们）。
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 文档中
从react-router文档中，props.match.params是存储您的参数的位置。
所以要访问过滤器名称，试试这个
const App = ({match}) => {
...
<VisibleTodoList
filter={match.params.filter || 'all'}
/>
...
}
我知道问题是关于 v4 的，但是如果 sm 寻找 v5，我们可以使用useParams钩子。
// /:filter
const {filter} = useParams();