如何使用React Router为动态路径添加可选查询参数？

首先要明确：查询参数（URL中?后面的部分）不属于Route路径匹配的范畴，你之前在Route的path里写makeYear?是错误的——这里的?是用来标记路径参数的可选性（比如/:id?表示id参数可选），和查询参数完全无关。

正确的路由配置 #

只需要匹配路径部分即可，查询参数不影响路由匹配，所以路由应该这么写：

<Route path="user" element={<UserScreen />}>
  <Route path=":id/cars" element={<UserCars />} />
</Route>

这样不管URL是/user/1/cars还是/user/1/cars?makeYear=2020，都会匹配到UserCars组件。

获取和处理查询参数 #

在React Router 6中，推荐使用useSearchParams钩子来处理查询参数，比useLocation更便捷，也不会导致参数被莫名移除：

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

function UserCars() {
  // 获取当前查询参数，以及设置参数的方法
  const [searchParams, setSearchParams] = useSearchParams();
  
  // 获取makeYear参数，没有的话返回null
  const makeYear = searchParams.get('makeYear');

  // 示例：设置/清除查询参数
  const setYearFilter = (year) => {
    if (year) {
      setSearchParams({ makeYear: year });
    } else {
      searchParams.delete('makeYear');
      setSearchParams(searchParams);
    }
  };

  return (
    <div>
      <h3>用户车辆列表</h3>
      <p>筛选年份：{makeYear || '无'}</p>
      <button onClick={() => setYearFilter('2020')}>只看2020年车辆</button>
      <button onClick={() => setYearFilter('')}>清除筛选</button>
    </div>
  );
}

关于查询参数被移除的问题 #

如果之前用useLocation时参数被移除，大概率是因为错误处理了路由跳转。正确传递查询参数的方式：

• 用Link组件跳转：

// 直接拼接URL
<Link to="/user/1/cars?makeYear=2020">查看2020年车辆</Link>

// 或者用对象形式（更灵活）
<Link to={{
  pathname: '/user/1/cars',
  search: '?makeYear=2020'
}}>查看2020年车辆</Link>

• 用useNavigate跳转：

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

function SomeComponent() {
  const navigate = useNavigate();
  
  const goToCars = () => {
    navigate('/user/1/cars?makeYear=2020');
    // 或者对象形式
    navigate({
      pathname: '/user/1/cars',
      search: '?makeYear=2020'
    });
  };
  
  return <button onClick={goToCars}>跳转</button>;
}

只要正确传递查询参数，React Router不会主动移除它们。

内容的提问来源于stack exchange，提问作者Frosty619