React路由器区分两个参数

Question

我正在使用 "react-router": "^5.1.2", 并且有一个名为 CarJourney 的组件，我为其创建了一个路径，如

path: '/seguro-carro/simulacao/:journeyId?/:userId?',

所以你可以看到 journeyId 和 userId 是此处定义的可选参数，但我遇到了一个场景，我必须获取这些参数并使用这些

点击不同的 api

因此，例如，如果我的路线包含

/seguro-carro/simulacao/ba6e7ae5-adb6-4722-87df-4f414c575bbb/abcdef

我可以像

一样使用useParams查询

const params = useParams()
console.log(params) to get both these parameters which gives journeyId='ba6e7ae5-adb6-4722-87df-4f414c575bbb' and userId="abcdef"

但是如果我的路线只包含 userId 而不是 journeyId 就像

/seguro-carro/simulacao/abcdef
console.log(params) gives me journeyId="abcdef and userId=undefined

有什么办法可以解决这个问题吗？在这种情况下，journeyId 应该是未定义的，userId 应该是 abcdef.

谢谢！

Answer 1

您可能会提供两条匹配路径。首先列出更具体的路径。如果使用具有两个参数的路径，则使用更具体的路径并分配两个参数，如果使用只有一个的路径，则使用将参数分配给 userId 的较不具体的路径。不要使用可选参数。

示例：

<Route
  path={[
    '/seguro-carro/simulacao/:journeyId/:userId',
    '/seguro-carro/simulacao/:userId'
  ]}
  ... other props
/>

React路由器区分两个参数

React router differentiate between two parameters

reactjs

react-router

react-router-dom

react-router-v5