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.
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: