reactjs - Hur döljer man förälder i djupt nästlat react router-objekt?

Jag undrar om det finns ett bättre sätt att dölja/inte rendera föräldrainnehåll i ett React Router-objekt. Jag skulle kunna lösa det med villkorlig renderering, men jag är inte säker på om det är det bästa tillvägagångssättet. Jag har förälder, barn och barnbarn och jag kommer bara att rendera barnbarnsinnehållet, men behålla den nästlade strukturen (för useMatches och andra saker). Jag försökte med Outlet men det hjälpte inte. Hur kan jag dölja förälder och barn från DOM?

const router: RouteObject = {
  id: "parent",
  path: "parent",
  element: <div><p>Parent</p></div>,
  children: [
    {
      id: "child",
      path: "/parent/child",
      element: <div><p>Child</p></div>,
      children: [
        {
          id: "grandchildLayout",
          index: true,
          element: <div><Outlet /></div>,
        },
        {
          id: "grandchild",
          path: "/parent/child/grandchild",
          element: <div><p>Grandchild</p></div>,
        },
      ],
    },
  ],
};

Svar #1

Rendera Parent och Child som indexvägar så att de endast renderas på exakt "/parent" respektive "/parent/child". Föräldravägen för varje kommer att rendera ett Outlet som standard, eller så kan du rendera en layoutvägskomponent och ett Outlet själv om du faktiskt har någon delad UI mellan vägarna.

Exempel :

const router: RouteObject = {
  id: "parent",
  path: "parent",
  children: [
    {
      index: true,
      element: <div><p>Parent</p></div>
    },
    {
      id: "child",
      path: "/parent/child",
      children: [
        {
          index: true,
          element: <div><p>Child</p></div>
        },
        {
          id: "grandchildLayout",
          element: (
            <div>
              <h3>Grandchild Layout</h3>
              <Outlet />
            </div>
          ),
          children: [
            {
              id: "grandchild",
              path: "/parent/child/grandchild",
              element: <div><p>Grandchild</p></div>
            }
          ]
        }
      ]
    }
  ]
};