React Router 中的多个可选参数

Question

我正在使用 React Router v5。

我遇到了需要支持以下用例的情况。

我有通过 访问的 React 组件/project/1234。/project/1234/hello但是，我还需要通过两者访问同一个 React 组件，/project/1234/goodbye.同样，所有这三个路由都需要导航到同一个 React 组件。

以下代码不起作用，因为据我所知，如果我导航到/project/1234/goodbye，react-router 会将其解释为我将“再见”作为参数的值传递，因此如果我使用react-router 的钩子:hello以编程方式询问参数useParams()本身，我就会得到错误的参数值。

<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，因此我不会使用useParams()react-router提供的钩子获得任何传递的参数。

<Route
   path={['project/:context', 'project/:context/:hello?', 'project/:context/:goodbye?']}
   render={matchProps => <Project {...matchProps}/>}
/>

我可以这样：

<Route
   path={'project/:context'}
   render={matchProps => <Project {...matchProps}/>}
/>

但是，当我使用react-router的useParams()钩子时，我将无法询问参数:goodbye或:hello

有人知道如何使用 React Router 来实现这一点吗？或者我只需要声明单独的路线？

Answer 1

更新

这是基于对需求的更好理解的更新答案。看起来您想要hello并且goodbye实际上是 URL 参数的名称，以便您可以在呈现的组件中获取它们。

您已经非常接近实现这一目标了。

在我的示例中，我将使用参数名称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/goodbye 将始终首先匹配 /project/1234 ，因此我不会使用 useParams() 钩子来获取任何传递的参数，该钩子会做出反应 -路由器提供。

你是绝对正确的，除非你使用exact参数。

这是一个沙箱：https://codesandbox.io/s/react-router-5-forked-1jjwt ?file=/src/index.js