ReactJS嵌套路由无法渲染：路由参数始终未定义问题排查

问题核心 #

在嵌套路由结构中，父路由配置为path="products/*"时，Products组件通过useParams()始终无法获取:productLine和:server参数，导致fetchProducts函数无法根据路由参数执行对应逻辑，无法正确渲染预期的服务器列表。

原因解析 #

React Router v6中，*通配符仅用于匹配后续所有路径段并转发给子组件，但不会将这些路径段解析为当前组件的路由参数。Products组件内部的子路由定义的:productLine和:server属于内部<Routes>的层级，而useParams()只能捕获当前组件所在路由层级的参数，因此直接在Products组件顶部调用useParams()无法拿到子路由的参数。

修复方案 #

无需修改父路由路径（避免破坏其他路由功能），以下两种方案可解决问题：

方案1：将参数获取逻辑下移到子组件（推荐） #

把服务器列表的加载逻辑放到ListServers组件中，让它自行捕获路由参数：

// 修改ListServers组件
function ListServers() {
  const { productLine } = useParams();
  const [servers, setServers] = useState([]);

  useEffect(() => {
    const fetchServers = async () => {
      try {
        // 这里可替换为真实接口请求
        setServers(mockServers);
      } catch (error) {
        console.error("Failed to fetch servers:", error);
      }
    };

    fetchServers();
  }, [productLine]);

  return (
    <div className="product-links row">
      {servers.map((prod, i) => (
        <div key={i} className="component-link col-xs-12 col-md-3">
          <Link to={`./${prod.system_id}/drivers`}>
            {`${prod.brand} ${prod.name}`}
          </Link>
        </div>
      ))}
    </div>
  );
}

同时调整Products组件的useEffect，仅处理根路径下的产品线加载：

// Products组件内的useEffect调整
useEffect(() => {
  if (location.state !== undefined && location.state !== null) {
    setAuthorized(location.state.authorized);
  }

  const fetchProductLines = async () => {
    try {
      const res = await http.get("/api/brands");
      if (res.brands.length === 0) {
        alert("No product lines available");
      } else {
        setProductLines(res.brands.sort());
      }
    } catch (error) {
      console.error("Failed to fetch product lines:", error);
    }
  };

  // 仅在/products根路径下加载产品线
  if (location.pathname === "/products") {
    fetchProductLines();
  }
}, [location.state, location.pathname]);

方案2：使用useMatch捕获子路由参数 #

如果需要在Products组件中直接获取参数，可通过useMatch匹配子路由路径：

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

function Products() {
  // 匹配子路由路径，提取参数
  const productLineMatch = useMatch("/products/:productLine");
  const serverMatch = useMatch("/products/:productLine/:server*");
  
  const productLine = productLineMatch?.params.productLine;
  const server = serverMatch?.params.server;

  // 后续逻辑保持不变
}

验证效果 #

应用修复后，访问/products/SuperServerLine时，productLine参数会被正确捕获，触发服务器列表加载，显示预期的三个服务器条目。

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