React Router 中的多个可选参数

如何解决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)

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 个参数。