[英]How to get params in nested route in react router v6? It's not working on my project
我的代码不起作用。 这是我的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>
)
}
此代码成功将我带到路线,但我无法在<SingleTeacher />
路线中获取id
参数。 这是我的SingleTeacher.js
文件:
export default function SingleTeacher() {
console.log(useParams());
return (
<div>SingleTeacher</div>
)
}
但它不能将任何信息记录到控制台。
鉴于:
<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
....
</>
);
};
看:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.