javascript - React Router 中的多个可选参数

Question

我正在使用 React Router v5。
我遇到了需要支持以下用例的情况。
我有可以通过 /project/1234 访问的 React 组件.但是，我还需要通过 /project/1234/hello 访问相同的 React 组件。和 /project/1234/goodbye.同样，所有这三个路由都需要导航到同一个 React 组件。
以下代码不起作用，因为据我所知，如果我导航到 /project/1234/goodbye ，react-router 会将此解释为我将 'goodbye' 作为 :hello 的值传递参数，所以如果我使用 react-router 的 useParams() 以编程方式询问参数钩子(Hook)本身，我会有错误的参数值。

<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 提供的钩子(Hook)。

<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

Similarly, this won't work, because using an array, /project/1234/goodbye will always match /project/1234 first, and therefore I won't get any of the params passed through using the useParams() hook that react-router provides.

你是绝对正确的，除非你使用 exact参数。
这是一个沙盒:https://codesandbox.io/s/react-router-5-forked-1jjwt?file=/src/index.js