Mi código no funciona. Aquí está mi archivo 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> ); } Aquí está mi código donde estoy enrutando la ruta 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> ) } Este código me lleva a la ruta con éxito, pero no puedo obtener los parámetros de id en la <SingleTeacher /> . Aquí está mi archivo SingleTeacher.js :
export default function SingleTeacher() { console.log(useParams()); return ( <div>SingleTeacher</div> ) }Pero no puede estar registrando ninguna información en la consola.
Dado:
<Route path="teachers" element={<Teachers />} > <Route exact path="single/:id" element={<SingleTeacher />} /> </Route> Entonces parece que a este componente de Teachers como ruta de diseño le falta representar un componente de Outlet para la ruta anidada que representa SingleTeacher .
Ejemplo:
import { Outlet } from 'react-router-dom'; const Teachers = () => { .... return ( <> .... <Outlet /> // <-- nested routes render element here .... </> ); };Ver: