React Router v6：如何让嵌套路由绕过父组件<Outlet />渲染？

当然可以实现，以下是几种实用的方案：

方案1：将目标路由提升为根级路由 #

把AddJob的路由从Profile的嵌套结构中移出，作为App的直接子路由，指定完整的绝对路径。这样访问该路径时，React Router会直接匹配这个根级路由，完全不加载父组件Profile和MyJobs。

修改后的App.js代码：

<Route path="/profile" element={<Profile />}>
  <Route index element={<ProfileDetails />} />
  <Route path="offer" element={<MyJobs />} />
</Route>
<Route path="/profile/offer/add" element={<AddJob />} />

方案2：在嵌套路由中使用绝对路径（不推荐） #

如果想保留路由的嵌套写法，也可以给AddJob的路由指定绝对路径，这样它会脱离父路由/profile的上下文，不会触发父组件的渲染。

示例代码：

<Route path="/profile" element={<Profile />}>
  <Route index element={<ProfileDetails />} />
  <Route path="offer" element={<MyJobs />} />
  <Route path="/profile/offer/add" element={<AddJob />} />
</Route>

这种方式虽然能实现需求，但路由结构嵌套却用绝对路径，可读性较差，一般不建议采用。

方案3：在父组件中根据路由控制布局渲染 #

如果需要保留路由嵌套结构，同时只是不想显示父组件的布局内容（父组件仍会被加载），可以在Profile组件中通过当前路由判断是否渲染自身布局。

修改后的Profile.js代码：

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

const Profile = () => {
  const location = useLocation();
  
  // 匹配AddJob的路径时，只渲染Outlet（即AddJob），不显示Profile的布局
  if (location.pathname === '/profile/offer/add') {
    return <Outlet />;
  }

  return (
    <>
      {/* Profile原有的布局内容 */}
      <div>个人信息头部</div>
      <Outlet />
      <div>个人信息底部</div>
    </>
  );
};

注意：这种方法下Profile组件仍会被React加载，只是不渲染布局内容，如果需要完全绕过父组件的加载，优先选择方案1。

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