javascript - 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

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

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

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

{`${url}/:username`}

然而，当我尝试匹配所有的 url 时，它不会

{`${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" }