如何在反应路由器 v6 的嵌套路由中获取参数？ 它不适用于我的项目

Question

My code is not working. Here is my App.js file:

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Dashboard />} >
          <Route path="teachers" element={<Teachers />} >
            <Route exact path="single/:id" element={<SingleTeacher />} />
          </Route>
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

Here is my code where I am routing the teachers/single/{id} route:

export default function TeacherCard({ name, spacial_at, teacher_pic_url, _id }) {
  return (
    <div className="bg-white shadow-lg py-4 px-3 rounded-lg flex md:flex-row flex-col justify-between items-center">
      <div className='relative'>
        <img className='h-16 w-16 object-cover rounded-full' src={teacher_pic_url} alt={name} loading={'lazy'} />
        <span className='absolute bottom-1 right-1 rounded-full px-1 py-1 bg-green-500 border border-white'></span>
      </div>
      <div className='flex md:pl-3 flex-col w-2/3 text-center md:text-left'>
        <span className=' font-semibold text-md'>{name}</span>
        <span className='text-gray-400 text-xs'>{spacial_at}</span>
        <Link to={`single/${_id}`} className='text-grad-to text-xs mt-2 md:text-left'>View profile</Link>
      </div>
    </div>
  )
}

This code takes me to the route successfully but I can't get the id params in <SingleTeacher /> route. Here is my SingleTeacher.js file:

export default function SingleTeacher() {
    console.log(useParams());
  return (
    <div>SingleTeacher</div>
  )
}

But It can't be logging any information to the console.

Answer 1

Given:

<Route path="teachers" element={<Teachers />} >
  <Route exact path="single/:id" element={<SingleTeacher />} />
</Route>

Then it seems this Teachers component as a layout route is missing rendering an Outlet component for the nested route rendering SingleTeacher .

Example:

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

const Teachers = () => {
  ....

  return (
    <>
      ....

      <Outlet /> // <-- nested routes render element here

      ....
    </>
  );
};

See:

• Layout Routes
• Outlet