使用React路由器向动态路径添加可选查询参数

Question

我正试图在路径的末尾添加一个可选的查询参数，所以URL看起来如下：/user/1/cars?makeYear=2020或/user/1/cars。有关路线的定义如下。我无法找到关于如何向现有路径添加可选查询参数的指导。例如，以下内容不起作用：

<Route path="user" element={<UserScreen />}>
  <Route path=":id/makeYear?" element={<User/>} />
</Route>

在这里，我认为<Route path=":id/makeYear?" element={<User/>} />会将makeYear标记为一个可选参数，但是不，不起作用。

然后，我认为我应该直接访问组件中的查询参数，因此，考虑到URL是/user/1/cars?makeYear=2020，我可以通过react路由器提供的useLocation api获取useLocation。但是，查询参数也不起作用，因为查询参数将立即从URL中删除(我猜是react路由器.)。

我使用的是react路由器-dom (6.2.2)

Answer 1

react-router-dom不使用queryString进行路由路径匹配。从路由queryString支柱中移除path部件。通过useSearchParams钩子访问组件中的查询参数。

<Route path=":id" element={<User/>} />

..。

import { useSearchParams } from 'react-router-dom';

const User = () => {
  const [searchParams] = useSearchParams();

  const makeYear = searchParams.get("makeYear");
  // handle logic based on makeYear

  ...
};