React Router 中的多个可选参数

Question

我正在使用 React Router v5。

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

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

下面的代码不起作用，因为据我所知，如果我导航到 /project/1234/goodbye，react-router 会将其解释为我将 'goodbye' 作为 [= 的值传递18=] 参数，所以如果我使用 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 将 return 'goodbye'

同样，这也行不通，因为使用数组，/project/1234/goodbye 总是首先匹配 /project/1234，因此我不会得到任何使用 [= 传递的参数19=] 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

如果我理解正确，那么你可以这样做：

<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

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

React Router 中的多个可选参数

Multiple Optional Params in React Router

javascript

reactjs

react-router

react-router-v4

react-router-dom