reactjs - 使用 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 是 /user/1/cars?makeYear=2020 ，我可以通过 useLocation 获取 URL由 react-router 提供的 api。但是，查询参数也不起作用，因为查询参数会立即从 URL 中删除(我猜是通过 react-router...)。

我正在使用 react-router-dom (6.2.2)

Answer 1

react-router-dom 不使用 queryString 进行路由路径匹配。从路由 path 属性中删除 queryString 部分。通过 useSearchParams 访问组件中的查询参数钩子(Hook)。

<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

  ...
};