React Router 6多路由参数传递与接收问题咨询

问题1：Route配置多参数后路由不匹配 #

你配置的<Route path="/SetServiceConfer/:name/:family" element={<ListServiceConfer />} />本身逻辑没问题，出现"not matching routes found"通常是以下原因导致：

• 跳转路径格式错误：访问的路径必须严格遵循/SetServiceConfer/[name值]/[family值]的结构，比如/SetServiceConfer/John/Doe，不能省略参数或格式混乱。不用useNavigate的话，可直接用Link组件跳转：<Link to={/SetServiceConfer/${name}/${family}}>进入列表页</Link>，地址栏直接输入也要保证格式一致。
• 路由层级冲突：如果这个Route是嵌套在其他路由下（比如父Route的path是/admin），完整路径需要拼接父路由前缀，即/admin/SetServiceConfer/:name/:family，跳转时要对应这个完整路径。
• 拼写/大小写不一致：React Router 6路由匹配区分大小写，检查路径名、组件名的拼写是否和配置完全一致。

正确使用示例：

// 路由配置
<Route path="/SetServiceConfer/:name/:family" element={<ListServiceConfer />} />

// 非useNavigate跳转方式
<Link to={`/SetServiceConfer/${name}/${family}`}>进入列表页</Link>

// 目标组件接收参数
import { useParams } from 'react-router-dom';

function ListServiceConfer() {
  const { name, family } = useParams();
  return <div>姓名：{name}，姓氏：{family}</div>;
}

问题2：useNavigate传参后useParams接收不到 #

这里混淆了两种参数的概念：search对应的是URL查询参数（?后面的部分），而useParams()是用来接收路由路径参数（:定义的URL片段）的，两者不能混用。

方案1：用查询参数接收 #

修改跳转代码（注意search要以?开头，参数需键值对格式）：

onClick={() => {
  HandleFetchListServiceConfer();
  navigate({
    pathname: "/SetServiceConfer",
    search: `?name=${name}&family=${family}`,
  });
}}

目标组件用useSearchParams获取参数：

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

function ListServiceConfer() {
  const [searchParams] = useSearchParams();
  const name = searchParams.get('name');
  const family = searchParams.get('family');
  return <div>姓名：{name}，姓氏：{family}</div>;
}

方案2：改用路径参数跳转 #

如果想继续用useParams接收，就用路径参数的方式跳转：

onClick={() => {
  HandleFetchListServiceConfer();
  navigate(`/SetServiceConfer/${name}/${family}`);
}}

保持原Route配置path="/SetServiceConfer/:name/:family"，即可通过const { name, family } = useParams();正常获取参数。

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