React路由场景下如何获取未指定具体名称的URL参数

方案1（推荐）：路由配置时声明动态参数占位 #

你不需要让参数名和跳转时的变量名完全对应，只需要在路由规则里给路径的对应分段设置自定义参数名即可，位置对应就能正确取值：

1. 先配置路由规则：

// React Router v6 示例，v5写法逻辑一致
<Route path="/movie/:id/:linkId" element={<对应页面组件 />} />

2. 在页面组件内直接获取参数：

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

const 你的页面组件 = () => {
  // 解构的key和路由里定义的参数名一一对应即可
  const { id, linkId } = useParams();
  // 此时id就是你跳转时传入的res.id，linkId就是res.link_id
}

这种方式是官方推荐的标准写法，维护性和可读性都最高。

方案2（仅特殊场景使用）：手动拆分路径取值 #

如果你的参数数量不固定，实在不想提前声明参数名，可以直接拿到完整路径后自行拆分：

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

const 你的页面组件 = () => {
  const { pathname } = useLocation();
  // 拆分路径得到所有分段，过滤空值
  const pathSegments = pathname.split('/').filter(Boolean);
  // 得到的pathSegments格式为 ['movie', 'res.id的值', 'res.link_id的值']
  const firstParam = pathSegments[1];
  const secondParam = pathSegments[2];
}

该方案不推荐常规场景使用，路径分段位置变动时会导致取值错误，维护成本较高。

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