React嵌套路由传参异常：点击产品详情仅URL变更页面不跳转

问题场景 #

点击导航栏的Wires and Cables选项可正常跳转到产品列表页，但点击列表中的产品详情链接时，仅URL发生变化，ProductDetail组件内容无法展示，需要实现父子路由传参并正确渲染详情页面。

核心问题原因 #

1. 父路由/WiresCables添加了exact属性，导致子路由/WiresCables/:id匹配时父路由不会渲染，嵌套路由失去承载基础。
2. WiresCables组件未添加<Outlet />，缺少子路由组件的渲染出口，子组件无法挂载到页面中。
3. 详情组件中参数类型未统一，可能导致产品匹配失败。

修复步骤及代码示例 #

1. 修改App.js路由配置 #

移除父路由的exact属性，确保子路由能触发父路由渲染：

import React from "react";
import Navbar from "../components/Navbar/Navbar";
import WiresCables from "../components/pages/WiresCables"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import ProductDetail from "../components/pages/ProductDetail";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navbar />} />
        {/* 移除exact，允许子路由匹配父路由路径 */}
        <Route path="/WiresCables" element={<WiresCables />}> 
          <Route path=":id" element={<ProductDetail />} />
        </Route>

        {/* 可选保留单独详情路由，支持直接访问 */}
        <Route path="/ProductDetail/:id" element={<ProductDetail />} />
      </Routes>
    </Router>
  );
};

export default App;

2. 更新WiresCables组件 #

添加<Outlet />作为子路由组件的渲染出口：

import React, { useState } from 'react';
import Finolex from '../../data/finolex';
import { NavLink, Outlet } from 'react-router-dom';

const WiresCables = () => {
    const [finolexData, setFinolexData] = useState(Finolex);

    return (
        <div>
            {/* 产品列表区域 */}
            <div className='grid grid-cols-2 lg:grid-cols-4 gap-6 pt-4'>
                {Finolex.map((item, index) => (
                    <div
                        key={index}
                        className='border shadow-lg rounded-lg hover:scale-105 duration-300'>
                        <img src={item.productImage} alt={item.company} className='w-full h-[200px] object-cover rounded-t-lg' />
                        <p>{item.productdesc}</p>
                        <nav>
                            <NavLink to={`/WiresCables/${item.id}`} activeClassName="active">Product Detail {item.id}</NavLink>
                        </nav>
                    </div>
                ))}
            </div>
            {/* 子路由渲染出口，ProductDetail将在此处显示 */}
            <Outlet />
        </div>
    );
};

export default WiresCables;

3. 优化ProductDetail组件 #

统一参数类型，添加产品不存在的兜底处理：

import React from 'react'
import { useParams } from 'react-router-dom'
import data from '../../data/finolex'

const ProductDetail = () => {
    const { id } = useParams();
    // 将URL参数转为数字，匹配数据中的id类型
    const product = data.find(x => x.id === Number(id));
    
    // 处理产品不存在的情况，避免页面报错
    if (!product) {
        return <div>Product not found</div>;
    }

    return (
        <div>
            <p>{product.productdesc}</p>
            <h4>{product.company}</h4>
        </div>
    )
}

export default ProductDetail

关键说明 #

• React Router v6中，exact属性已被默认路由匹配逻辑替代，显式添加会阻止父路由匹配子路由路径。
• <Outlet />是嵌套路由的核心，必须在父路由组件中声明，用于承载子路由组件的渲染。
• URL参数默认是字符串类型，需与数据中的id类型统一，避免匹配失败。

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