react-router-dom 5.2.0中useParams返回undefined问题求助

问题描述 #

使用react-router-dom 5.2.0时，在App.jsx中配置了四个指向ProductListPage的Route路由，分别对应商品列表展示、分页、分类、筛选场景。但在ProductListPage组件中通过useParams获取page、gender、category、filter参数时始终返回undefined，访问"/shop/women/tshirt"、"/shop/1"这类路径也无法获取参数。

相关代码 #

App.jsx

<Route path="/shop">
<ProductListPage />
</Route>
<Route path="/shop/:page">
<ProductListPage />
</Route>
<Route path="/shop/:gender/:category?">
<ProductListPage />
</Route>
<Route path="/shop/:filter">
<ProductListPage />
</Route>

ProductListPage.jsx

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

export default function ProductListPage() {
let { page } = useParams();
let { gender, category } = useParams();
let { filter } = useParams();

console.log(page + " " + gender + " " + filter + " " + category);

return (
<div className="bg-light-gray-1">
  <ProductCategories />
  <ProductList />
  <ClientList />
</div>
);
}

问题原因 #

1. 路由匹配顺序与Switch缺失：React Router 5默认会渲染所有匹配的Route，且按定义顺序匹配。比如访问"/shop/1"时，第一个/shop路由会先匹配成功并渲染组件，后续带参数的路由不会生效，导致组件获取不到参数。
2. 路由规则冲突：/shop/:page和/shop/:filter的规则完全一致，Router无法区分这两种场景，只会匹配先定义的路由。
3. 冗余的useParams调用：多次调用useParams虽然不影响功能，但属于不必要的代码冗余。

解决方案 #

方案1：用Switch包裹路由并调整匹配顺序 #

使用<Switch>确保只有第一个匹配的路由被渲染，同时将更具体的路由放在前面，模糊路由兜底。

修改后的App.jsx：

import { Switch, Route } from 'react-router-dom';

// 其他组件代码...
<Switch>
  {/* 最具体的分类路由放在最前面 */}
  <Route path="/shop/:gender/:category?" component={ProductListPage} />
  {/* 用正则限制page为数字，区分筛选参数 */}
  <Route path="/shop/:page(\d+)" component={ProductListPage} />
  {/* 筛选路由 */}
  <Route path="/shop/:filter" component={ProductListPage} />
  {/* 兜底的无参数路由 */}
  <Route path="/shop" component={ProductListPage} />
</Switch>

说明：

• 正则(\d+)确保:page只匹配数字，避免和:filter（假设为非数字字符串）冲突。
• Switch会从上到下匹配，优先渲染最匹配的路由。

方案2：合并路由规则（更简洁） #

将所有场景合并为一个路由，通过可选参数覆盖所有情况，在组件内部判断参数含义。

修改后的App.jsx：

<Route path="/shop/:type?/:subtype?" component={ProductListPage} />

修改后的ProductListPage.jsx：

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

export default function ProductListPage() {
  const { type, subtype } = useParams();
  
  let page, gender, category, filter;
  // 根据参数格式判断场景
  if (type && !isNaN(Number(type))) {
    page = type;
  } else if (type && subtype) {
    gender = type;
    category = subtype;
  } else if (type) {
    filter = type;
  }

  console.log(page, gender, filter, category);

  return (
    <div className="bg-light-gray-1">
      <ProductCategories />
      <ProductList />
      <ClientList />
    </div>
  );
}

说明：

• :type?/:subtype?定义两级可选参数，覆盖所有访问场景：
  • /shop：type、subtype均为undefined
  • /shop/1：type为'1'，subtype为undefined（判定为分页）
  • /shop/women/tshirt：type为'women'，subtype为'tshirt'（判定为分类）
  • /shop/sale：type为'sale'，subtype为undefined（判定为筛选）
• 组件内部通过逻辑判断参数类型，避免路由规则冲突。

代码优化 #

原代码中多次调用useParams是冗余的，只需调用一次即可解构所有参数：

const { page, gender, category, filter } = useParams();

内容的提问来源于stack exchange，提问作者Münir BESYE