Best way to incorporate two vastly distant components with routing?

[reef frost]

Imagine a layout where I have a navbar at the top, then a sidebar, and then some content.

THe route determines the sidebar, and then subroutes beneath that determine the content of the page.

However, I also need a control in the navbar. THe control is unique to each content page, sometimes its an iinput field, sometimes, a button, sometimes it displays data.

I am trying to wrap my head around a good pattern to have this "navbar" component dynamically load components, while also passing that data to the content page. I could use context, but like I said, the controls and what it is doing are very unique to each page, so there is no real way to abstract a singular context.

I did try creating a context wherein state of the navbar contents where of type ReactNode and could pass down a setState to the content page wherein it could dynamically set the contents of hte navbar controls via a useEffect but this created terrible performance with an input for example because the state was controlled in the content but the state was set on every key click in a slow useEffect.

I am kinda scratching my head on this pattern.

Best way to incorporate two vastly distant components with routing?

[humble bolt]

You can use useMatches() in the navbar, detect the content based on route id and render conditionally based on that.

[alpine fog]

Yeah a lot of folks will put data and even Components on route.handle for this use case. ```jsx
function Layout() {
let matches = useMatches();
let Sidebar = [...matches].reverse().find(m => m.handle?.Sidebar) || null
return (
<>
<LeftNav>
<Outlet />
<Sidebar />
</>
);
}

[vague ermine]

There’s a kent article on this about surfacing those elements as props, I’ll see if I can find it

function App() {
  return (
    <div>
      <Homepage
        leftNav={
          <LeftNav>
            <DashboardDropdown />
            <Repositories />
            <Teams />
          </LeftNav>
        }
        centerContent={
          <CenterContent>
            <RecentActivity />
            <AllActivity />
          </CenterContent>
        }
        rightContent={
          <RightContent>
            <Notices />
            <ExploreRepos />
          </RightContent>
        }
      />
    </div>
  )
}