大佬教程收集整理的这篇文章主要介绍了React Router 中的多个可选参数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我使用的是 React Router v5。
我遇到了需要支持以下用例的情况。
我有通过 /project/1234 访问的 React 组件。但是，我还需要通过 /project/1234/Hello 和 /project/1234/goodbye. 访问同一个 React 组件。同样，这三个路由都需要导航到同一个 React 组件。
以下代码不起作用，因为据我所知，如果我导航到 /project/1234/goodbye，react-router 会将其解释为我将 'goodbye' 作为 :Hello 参数的值传递，所以如果我使用 react-router 的 useParams() 钩子本身以编程方式询问参数，我会得到错误的参数值。
<Route
path={'project/:context/:Hello?/:goodbye?'}
render={matchProps => <Project {...matchProps}/>}
/>
换句话说，如果导航到 /project/1234/goodbye 然后执行：
const params = useParams()
console.log(params.Hello)
同样，这也行不通，因为使用数组，/project/1234/goodbye 将始终首先匹配 /project/1234，因此我不会使用 {{1}由 react-router 提供的钩子。
useParams()我本来可以：
<Route
path={['project/:context','project/:context/:Hello?','project/:context/:goodbye?']}
render={matchProps => <Project {...matchProps}/>}
/>
但是，当我使用 react-router 的 <Route
path={'project/:context'}
render={matchProps => <Project {...matchProps}/>}
/>
钩子时，我将无法查询参数 useParams() 或 :goodbye
有人知道如何使用 React Router 实现这一点吗？还是我只需要声明单独的路由？
更新
这是基于对要求的更好理解而更新的答案。您似乎希望 Hello 和 goodbye 实际上是 URL 参数的名称，以便您可以在呈现的组件中获取它们。
您已经非常接近实现这一目标了。
在我的示例中，我将使用参数名称 var1（而不是 Hello 或 goodbye），以便通过使用 /project/1234/Hello 访问您的应用程序，您将获得 {{1 }} 而这个 URI {Context: "1234",var1: "Hello"} 将产生 /project/1234/goodbye
您只需要这条路线：
{Context: "1234",var1: "goodbye"}然后在渲染的组件中，您可以像这样访问 URL 参数：
<Route
exact
path={["/project/:context","/project/:context/:var1"]}
component={Project}
/>
同样，这也行不通，因为使用数组，/project/1234/goodbye 将始终首先匹配 /project/1234，因此我不会使用 useParams() 钩子传递任何参数反应路由器提供的。
您完全正确，除非您使用 props.match.params
参数。
这是一个沙盒：https://codesandbox.io/s/react-router-5-forked-1jjwt?file=/src/index.js
,如果我正确理解了这个问题，那么你可以这样做：
<Route path="/project/:context">
<Project />
</Route>
这是因为您没有调用确切的路径。基本上任何以 /project/:context 开头的内容都会导航到正确的组件，即使后面还有 10 个参数。
以上是大佬教程为你收集整理的React Router 中的多个可选参数全部内容，希望文章能够帮你解决React Router 中的多个可选参数所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。