React路由器中的多个可选参数
我使用的是React路由器v5。
我遇到了需要支持以下用例的情况。
我已经获得了通过/project/1234访问的React组件。但是，我还需要通过/project/1234/hello和/project/1234/goodbye.访问这个相同的React组件，所有这三条路由都需要导航到相同的React组件。
下面的代码不起作用，因为据我理解，如果我导航到/project/1234/goodbye，react路由器将把它解释为我将“再见”解释为:hello param的值，所以如果我使用react路由器的useParams()钩子本身以编程方式询问param，我将得到错误的param值。
<Route
path={'project/:context/:hello?/:goodbye?'}
render={matchProps => <Project {...matchProps}/>}
/>换句话说，如果导航到/project/1234/goodbye，然后执行：
const params = useParams()
console.log(params.hello)params.hello将返回“再见”
类似地，这是行不通的，因为使用数组时，/project/1234/goodbye总是首先匹配/project/1234，因此我不会使用react路由器提供的useParams()钩子传递任何参数。
<Route
path={['project/:context', 'project/:context/:hello?', 'project/:context/:goodbye?']}
render={matchProps => <Project {...matchProps}/>}
/>我可以这么做：
<Route
path={'project/:context'}
render={matchProps => <Project {...matchProps}/>}
/>然而，当我使用react路由器的useParams()钩子时，我将无法询问params :goodbye或:hello
有人知道如何使用React路由器来完成这个任务吗？还是我只需要申报不同的路线？
回答 2
Stack Overflow用户
发布于 2021-03-16 15:41:52
更新
这是一个基于对需求的更好理解的最新答案。您似乎希望hello和goodbye实际上是URL参数的名称，以便您可以在呈现的组件中获取它们。
你已经接近完成这一目标了。
在我的示例中，我将使用prameter名称var1 (而不是hello或goodbye)，这样通过使用/project/1234/hello访问应用程序，您将获得{context: "1234", var1: "hello"}，而这个URI /project/1234/goodbye将生成{context: "1234", var1: "goodbye"}
你所需要的就是这条路线：
<Route
exact
path={["/project/:context", "/project/:context/:var1"]}
component={Project}
/>然后，在呈现的组件中，您可以访问URL参数，如下所示：
props.match.params类似地，这也不起作用，因为使用数组/project/1234 /
总是首先匹配/project/1234，因此我不会使用useParams()钩子传递任何响应路由器提供的参数。
除非您使用exact param，否则您是绝对正确的。
下面是一个沙箱：https://codesandbox.io/s/react-router-5-forked-1jjwt?file=/src/index.js
Stack Overflow用户
发布于 2021-03-16 15:41:18
如果我正确地理解了这个问题，那么你就可以这样做：
<Route path="/project/:context">
<Project />
</Route>这是因为你没有调用确切的路径。基本上，任何以/project/:context开头的内容都将导航到正确的组件，即使之后还有10个参数。
https://stackoverflow.com/questions/66664802
复制
腾讯云开发者
