React Router v6嵌套路由如何获取参数？我的项目无法实现

核心问题 #

你的SingleTeacher组件根本没有被挂载，所以useParams()的控制台输出不会出现。原因是父路由组件（Dashboard和Teachers）没有渲染<Outlet>——React Router v6的嵌套路由完全依赖<Outlet>来承载子路由对应的组件，缺少它的话，子路由跳转成功但组件不会被渲染。

具体修复步骤 #

1. 移除路由配置中的exact属性

React Router v6中<Route>默认就是精确匹配，exact属性已被移除，属于无效配置：

// 修改后的App.js路由
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Dashboard />} >
          <Route path="teachers" element={<Teachers />} >
            {/* 移除exact属性 */}
            <Route path="single/:id" element={<SingleTeacher />} />
          </Route>
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

2. 在父路由组件中添加<Outlet>

• Dashboard组件需要添加<Outlet>来渲染Teachers组件：

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

function Dashboard() {
  return (
    <div>
      {/* 这里是Dashboard的原有内容 */}
      <Outlet /> {/* 必须添加，用于渲染子路由的Teachers组件 */}
    </div>
  );
}

• Teachers组件需要添加<Outlet>来渲染SingleTeacher组件：

import { Outlet } from 'react-router-dom';
import TeacherCard from './TeacherCard';

function Teachers() {
  return (
    <div>
      {/* 这里是Teachers的原有列表内容（比如渲染多个TeacherCard） */}
      <TeacherCard />
      <Outlet /> {/* 必须添加，用于渲染子路由的SingleTeacher组件 */}
    </div>
  );
}

3. 确保SingleTeacher正确导入并使用useParams

import { useParams } from 'react-router-dom'; // 必须导入该钩子

export default function SingleTeacher() {
  const params = useParams();
  console.log(params); // 现在可以正常输出{ id: "你的参数值" }
  return (
    <div>SingleTeacher: {params.id}</div>
  )
}

原理说明 #

React Router v6的嵌套路由逻辑是：父路由的element必须通过<Outlet>来指定子路由组件的渲染位置，没有<Outlet>的话，子路由的组件只会被路由匹配，但不会被挂载到DOM中，自然无法执行组件内的代码（包括useParams()）。

内容的提问来源于stack exchange，提问作者Md Nazmul Islam