javascript - 如何在React Router v6中获取嵌套路由中的参数？它不适用于我的项目

Question

我的代码无法运行。这是我的App.js文件:

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>
  );
}

这是我的代码，我正在其中路由 teachers/single/{id}路线:

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>
  )
}

此代码成功将我带到路线，但我无法获取 id参数在 <SingleTeacher />路线。这是我的SingleTeacher.js文件:

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

但它无法将任何信息记录到控制台。

Answer 1

给定:

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

然后，作为布局路由的 Teachers 组件似乎缺少为嵌套路由渲染 SingleTeacher 渲染 Outlet 组件。

示例:

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

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

  return (
    <>
      ....

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

      ....
    </>
  );
};

参见:

• Layout Routes
• Outlet