如何在深度嵌套的React Router路由对象中隐藏父级内容？

要实现仅渲染孙级内容、同时保留路由嵌套结构（支持useMatches等API），可以通过以下两种方式解决：

方式一：按需渲染父/子内容（适合部分路由需显示父级内容的场景） #

通过useMatches判断当前路由是否匹配到孙级，动态决定是否渲染父级/子级自身内容，仅在非孙级路由时显示父/子内容，孙级路由时只传递子路由（通过<Outlet />）。

1. 封装父级组件：

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

const ParentComponent = () => {
  const matches = useMatches();
  // 检查是否匹配到孙级路由（根据路由id判断）
  const isGrandchildRoute = matches.some(match => match.id === 'grandchild');

  return (
    <>
      {/* 非孙级路由时显示父级内容 */}
      {!isGrandchildRoute && <div><p>Parent</p></div>}
      {/* 始终渲染Outlet，用于加载子路由内容 */}
      <Outlet />
    </>
  );
};

2. 封装子级组件：

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

const ChildComponent = () => {
  const matches = useMatches();
  const isGrandchildRoute = matches.some(match => match.id === 'grandchild');

  return (
    <>
      {!isGrandchildRoute && <div><p>Child</p></div>}
      <Outlet />
    </>
  );
};

3. 更新路由对象（注意嵌套路由的path无需写完整路径，React Router会自动拼接）：

const router: RouteObject = {
  id: "parent",
  path: "parent",
  element: <ParentComponent />,
  children: [
    {
      id: "child",
      path: "child",
      element: <ChildComponent />,
      children: [
        {
          id: "grandchild",
          path: "grandchild",
          element: <div><p>Grandchild</p></div>,
        },
      ],
    },
  ],
};

方式二：将父/子设为纯路由容器（适合始终不需要显示父/子内容的场景） #

如果父级和子级仅需维护路由嵌套结构，不需要渲染任何自身内容，直接将它们的element设为<Outlet />即可，这样父/子不会生成任何DOM节点，仅作为路由层级的容器：

const router: RouteObject = {
  id: "parent",
  path: "parent",
  element: <Outlet />, // 纯容器，无自身内容
  children: [
    {
      id: "child",
      path: "child",
      element: <Outlet />, // 纯容器，无自身内容
      children: [
        {
          id: "grandchild",
          path: "grandchild",
          element: <div><p>Grandchild</p></div>,
        },
      ],
    },
  ],
};

为什么你之前用<Outlet>无效？ #

你原来的父级和子级element直接渲染了自身内容，没有包含<Outlet />，导致子路由的内容无法被插入到父级路由的DOM结构中。React Router的嵌套路由要求父级路由的element必须包含<Outlet />，子路由的内容才会渲染到这个位置。

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