如何解决切换嵌套组件时不渲染组件
我有一个渲染侧边栏的主体组件和一个主组件,主组件还具有路由和一个类似选项卡的开关,应该在其中渲染其组件。
当前身体成分看起来像这样
function Body() {
const { path } = useRouteMatch();
const routes = [
{
path: `${path}/`,exact: true,name: "course-info",expandable: true,main: () => <h1>course info</h1>,},{
path: `${path}/modules`,name: "course-content",expandable: <SubModule />,main: () => (false ? <EmptyCourseModule /> : <Lessons />),{
path: `${path}/projects`,name: "projects",main: () => <h1>g</h1>,{
path: `${path}/pricing`,name: "pricing",main: () => <h2>Home</h2>,{
path: `${path}/settings`,name: "settings",];
return (
<div className="d-flex body">
<div className="col-3 no-gutters body__sidebar">
<Sidebar routes={routes} />
</div>
<div className="col-9 body__content">
<Switch>
{routes.map((route,i) => (
<Route key={i} path={route.path} exact={route.exact}>
{route.main}
</Route>
))}
</Switch>
</div>
</div>
);
}
export default Body;
课程组件在lessonCard组件中具有开关和路由
export default function LessonCard(props: ILessonCardProps) {
const { path } = useRouteMatch();
console.log(path)
const routes = [
{
path: `${path}/lessons`,main: () => <EmptyLessons />,name: "Lessons",{
path: `${path}/quiz`,main: () => <h2>Quiz</h2>,name: "Quiz",{
path: `${path}/assignments`,main: () => <h2>Assignments</h2>,name: "Assignments",];
return (
<div className="lesson">
<div className="lesson__header d-flex">
{routes.map((eachRoute,index) => (
<Link
key={index}
to={`${eachRoute.path}`}
className="mr-4 d-flex align-items-center"
>
<span>{eachRoute.name}</span>
<span className=" ml-1 lesson__link-badge">0</span>
</Link>
))}
</div>
<div className="lesson__content">
{
<Switch>
{routes.map((route,i) => (
<Route key={i} path={route.path} exact={true} component= {route.main} />
))}
</Switch>
}
</div>
</div>
);
}
但这不能按预期工作,它会相应地更新url,但不会呈现其组件。我想念什么
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。