使用 React Router 将可选查询参数添加到动态路径

Question

我正在尝试将可选查询参数添加到路径末尾，因此 URL 将如下所示："/user/1/cars?makeYear=2020"或"/user/1/cars"。相关Route定义如下。我无法找到有关如何将可选查询参数添加到现有路径的指南。例如，以下内容不起作用：

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

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

然后我想我可以直接在组件中访问查询参数，因此假设 URL 是，我可以通过提供的 api"/user/1/cars?makeYear=2020"获取 URL 。但是，查询参数也不起作用，因为查询参数会立即从 URL 中删除（我猜是通过）。useLocationreact-router-domreact-router

我正在使用react-router-dom（6.2.2）。

Answer 1

react-router-dom不使用 queryString 进行路由路径匹配。从 Routepath属性中删除 queryString 部分。通过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

  ...
};