如何在React中通过路由动态渲染对应组件（类Angular Router）

要实现你想要的效果，核心是使用React Router提供的<Outlet />组件——它的作用和Angular的<router-outlet>完全一致，专门用来渲染当前匹配的子路由对应的组件。

步骤1：导入Outlet组件 #

首先需要从react-router-dom中导入Outlet：

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

步骤2：修改Layout组件 #

将你标注「Here」位置的固定<Info/>替换为<Outlet />，这样就能根据当前路由动态渲染对应的子组件，同时保留updatedCv类的div：

const Layout = () => {
    return (
        <div className='layout'>
            <Outlet /> {/* 动态渲染子路由组件的位置 */}
            
            <div className='updatedCv'></div> {/* 该元素会始终显示 */}
        </div>
    )
}

说明 #

• 访问/createCV/info时，<Outlet />会自动渲染<Info />组件；
• 访问/createCV/education时，会自动渲染<Education />组件；
• 你的现有路由配置无需修改，已经正确设置了createCV的子路由规则。

内容的提问来源于stack exchange，提问作者Killa