React Router 如何匹配模糊路径和静态路径

Question

我目前正在尝试匹配以下 URL

https://www.example.com/discover/exampleuser/review

还有其他 url 也与正则表达式匹配

https://www.example.com/discover/community
https://www.example.com/discover/reviews
https://www.example.com/discover/activity

我有以下代码可以很好地匹配最后三个网址

<Route path={`${url}/(community|reviews|activity)`} render={prop => (
  <div className='mb-4'>
    <CollectionWidget { ...prop } />
  </div>
)} />

每当我使用以下路径时它都有效

{`${url}/:username`}

然而，当我尝试像这样匹配所有网址时，它并没有

{`${url}/(community|reviews|activity|:username)`}

如何将正则表达式与不明确的 ID 匹配

Answer 1

说实话这听起来不太可能，你怎么能同时匹配未命名和命名参数？

幸好你可以传入 2 个字符串（或更多）：


<Route 
  path={[
    `${base}/(a|b|c)`, 
    `${base}/:username
  `]} 
  component={({ match }) => <div children={JSON.stringify(match.params)} />} />

// /b ---> { 0: "b" }
// /c ---> { 0: "c" }
// /d ---> { "username": "d" }

React Router 如何匹配模糊路径和静态路径

How to match ambiguous path and static path with React Router

javascript

regex

reactjs

react-router-v4