react-router-dom中Routes与useParams的正确用法及参数获取问题

问题根源 #

你在根路由中使用了/group-center/*这个通配符路径，它会将/group-center/之后的全部内容捕获为*参数直接传递给GroupCenter组件，导致GroupCenter内部的嵌套路由（匹配:groupId/*）完全没有机会解析路径中的groupId——因为整个后续路径已经被上层路由"吞掉"了。

解决方法 #

根据你的需求，有两种调整方案：

方案1：保留原组件嵌套结构，调整根路由路径

将根路由的通配符去掉，只保留/group-center，让内部嵌套路由负责解析groupId及后续子路径：

// 根路由配置
<Route path="/group-center" element={<GroupCenter />}>
  {/* GroupCenter内部的嵌套路由 */}
  <Route path=":groupId/*" element={<GroupDetails />}>
    {/* GroupDetails内部的子路由 */}
    <Route path="settings" element={<Settings />} />
  </Route>
</Route>

此时若要在GroupCenter的SideBar中获取groupId，可通过useMatch方法匹配嵌套路由的路径：

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

const match = useMatch("/group-center/:groupId/*");
const groupId = match?.params.groupId;

方案2：将groupId参数提升到根路由层级

如果需要直接用useParams在GroupCenter中获取groupId，可把groupId参数放到根路由路径里：

// 根路由配置
<Route path="/group-center/:groupId" element={<GroupCenter />}>
  {/* GroupCenter内部的嵌套路由，处理后续子路径 */}
  <Route path="settings" element={<GroupDetails />} />
  {/* 其他子路由 */}
</Route>

这时在SideBar中直接调用useParams就能拿到groupId：

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

const { groupId } = useParams<{ groupId: string }>();

注意事项 #

无论哪种方案，都要确保所有父路由组件中正确使用<Outlet />组件来渲染子路由的内容，否则嵌套路由无法生效。

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