React Router 中的多个可选参数

Question

我正在使用 React Router v5。

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

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

以下代码不起作用，因为据我了解，如果我导航到 /project/1234/goodbye，react-router 会将其解释为我将“再见”作为 :hello 参数的值传递，所以如果我使用 react-router 的 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，因此我不会使用 react-router 的 useParams() 钩子传递任何参数提供。

<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

如果我正确理解了这个问题，那么您可以这样做：

<Route path="/project/:context">
    <Project />
</Route>

这是因为您没有调用确切的路径。基本上任何以 /project/:context 开头的东西都会导航到正确的组件，即使它后面还有 10 个参数。

Answer 2

更新

这是基于对要求的更好理解的更新答案。您似乎希望 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() 钩子传递任何参数react-router 提供的。

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

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