react-router-dom嵌套路由中useParams()返回undefined问题求助

问题背景 #

项目依赖版本：

"react-router-dom": "^6.3.0",
"react-router-redux": "^4.0.8",

需实现/help路径的无限嵌套路由（如/help/calendar、/help/markdown/calendar/table等），当前路由定义如下：

{
  ...
  { path: "/help", component: <HelpScreen /> }, 
  { path: "/help/...path", component: <HelpScreen /> }
}

在HelpScreen组件中使用useParams()尝试获取嵌套路径时，返回空对象，path始终为undefined：

const { path } = useParams();
console.log(path); // undefined

解决方案 #

1. 修正路由的catch-all参数写法 #

React Router v6 废弃了v5版本中...的catch-all语法，改用:param*格式定义匹配任意嵌套层级的动态参数。将路由定义修改为：

{
  ...
  { path: "/help", component: <HelpScreen /> }, 
  { path: "/help/:path*", component: <HelpScreen /> }
}

:path*表示匹配/help之后的所有路径片段，并将其作为path参数传递给组件。

2. 在组件中正确获取参数 #

修改路由后，在HelpScreen中重新使用useParams()即可获取完整的嵌套路径：

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

const HelpScreen = () => {
  const { path } = useParams();
  console.log(path); // 访问/help/calendar时输出"calendar"；访问/help/markdown/table时输出"markdown/table"
  // 可根据path值加载对应帮助内容
  return <div>帮助页面：{path}</div>;
};

3. 路由匹配说明 #

• /help会精确匹配根帮助页面，不会触发catch-all路由
• /help/:path*会匹配所有以/help/开头的嵌套路径，支持单层、多层嵌套结构
• React Router v6的<Routes>组件会自动匹配最精确的路由，无需调整两个路由的顺序

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