Injecting components into parent layout from outlet

[AndrewJSchoen]

Hey all,

I am trying to set up some routes in an app that uses a layout and outlets. Specifically, the layout is mostly handling the presence of a menu bar, and the outlet manages a set of pages. In this case, one subset of these pages needs to augment the content of that menu bar with additional capabilities, but those items need to live within a context for that outlet. Right now we are getting around that by literally duplicating/augmenting the menu bar in that specific route and not nesting it within the main layout route. Theoretically, this would call for something like a Portal, but wasn't sure how well that would play out with the routing happening. Does anyone have any suggestions on how this might be achieved in order to re-use the same layout?

Just to fully lay out the current/desired:

// Current Router, Layout is included as both a layout route and the menu inside is 
// duplicated separately in <PageWithAugmentedMenu />
const router = createBrowserRouter([
  {
    path: "/",
    element: <LayoutWithMenu />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: (
          <Index />
        ),
      },
      {
        path: "login",
        element: <Login />,
      },
    ]
  },
  {
    path: "path/:field",
    element: (
      <PageWithAugmentedMenu />
    ),
  },
])

// Desired Router. Route at "path/:field" reuses the layout and injects
// any necessary components in the menu from within its context
const router = createBrowserRouter([
  {
    path: "/",
    element: <LayoutWithMenu />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: (
          <Index />
        ),
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "path/:field",
        element: (
          <PageWithMenuAugmentations />
        ),
      },
    ]
  },
])