React Router中能否同时使用URL参数与查询参数？

完全没问题，在React Router中，URL参数（比如:id）和查询参数（比如?lat=50）是可以在同一路径中共存的，而且它们的职责和获取方式是分开的，不会互相冲突。下面我来具体讲怎么实现：

一、路由配置注意点 #

首先要明确：查询参数不需要写在路由的路径定义里。路由路径只需要声明URL参数即可，因为查询参数是用户访问时动态附加的，不属于路由匹配的规则部分。

比如你举的例子，正确的路由配置应该是这样的（以React Router v6为例）：

import { Routes, Route } from 'react-router-dom';
import RestaurantDetail from './RestaurantDetail';

function App() {
  return (
    <Routes>
      {/* 只定义URL参数:id，查询参数不用写在这里 */}
      <Route path="/restaurants/:id" element={<RestaurantDetail />} />
    </Routes>
  );
}

当用户访问/restaurants/123?lat=50时，这个路由会成功匹配，因为路由只关心/restaurants/:id部分，后面的?lat=50会被当作查询参数处理。

二、如何获取两类参数 #

React Router提供了专门的hooks来分别获取这两类参数，非常方便：

1. 获取URL参数：useParams #

用useParams钩子可以直接拿到路由路径中定义的URL参数：

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

function RestaurantDetail() {
  // 解构出id参数，类型是字符串
  const { id } = useParams();
  
  return <p>当前餐厅ID：{id}</p>;
}

2. 获取查询参数：useSearchParams #

React Router v6新增的useSearchParams钩子专门用来处理查询参数，它返回一个类似URLSearchParams的对象，你可以用get()方法获取具体的参数值：

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

function RestaurantDetail() {
  const { id } = useParams();
  // 解构出searchParams对象（第二个元素是修改参数的方法，这里暂时用不到）
  const [searchParams] = useSearchParams();
  
  // 获取lat参数，如果不存在会返回null
  const lat = searchParams.get('lat');
  // 也可以设置默认值
  const safeLat = lat || '未提供纬度';

  return (
    <div>
      <p>餐厅ID：{id}</p>
      <p>纬度：{safeLat}</p>
    </div>
  );
}

如果你还在使用React Router v5... #

v5没有useSearchParams，需要结合useLocation和第三方库（比如query-string）来解析查询参数：

import { useParams, useLocation } from 'react-router-dom';
import queryString from 'query-string';

function RestaurantDetail() {
  const { id } = useParams();
  const location = useLocation();
  // 解析查询参数为对象
  const queryParams = queryString.parse(location.search);
  const lat = queryParams.lat;

  return (
    <div>
      <p>餐厅ID：{id}</p>
      <p>纬度：{lat || '未提供'}</p>
    </div>
  );
}

总结 #

• 路由配置只需要处理URL参数，查询参数不用写在路由路径中
• 用useParams获取URL参数，useSearchParams（v6）或useLocation+解析库（v5）获取查询参数
• 两者可以完美共存，互不影响，完全满足你需求的场景

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