stormy-gold

route api to support more than one outlet

Hello, i've a broad question. i have an app layout which i want to use at the top level of my app (let's assume /routes/app) and have subroutes which i allow with one <Outlet /> component. that being said, my layout's sidebar needs to change depending on the route (which is pretty common) and i'd like to know if, since the router has a component: <RouteComponent /> api, it was possible to have more than one outlet so that my routes could also return their own sidebar structures. thank you

7 Replies

stormy-goldOP•3w ago

gpt suggests some very questionable things, i doubt this works and even more that this is desired behavior

stormy-goldOP•3w ago

spiritual-aqua•3w ago

i'd like to know if, since the router has a component: <RouteComponent /> api, it was possible to have more than one outlet

No. Only 1 outlet

so that my routes could also return their own sidebar structures.

Well you can access the matches object using useMatches or (match object using useMatch({ strict: false })) inside your sidebar like this

const matches = useMatches();

if (matches.some(match => match.routeId === 'foo')) {
  return <SidebarForFoo />
}

if (matches.some(...)) {
  return <AnotherSidebar />
}

const matches = useMatches();

if (matches.some(match => match.routeId === 'foo')) {
  return <SidebarForFoo />
}

if (matches.some(...)) {
  return <AnotherSidebar />
}

stormy-goldOP•3w ago

@hokkyss that's exactly why i'm asking for an api change the current uses matches, which means you flat out your if/else in one big component, where it could be distributed similarly to Route.component if it was possible

spiritual-aqua•3w ago

Like parallel routes then? Either way, they plan to support named outlets so we can have multiple outlets in a route. https://discord.com/channels/719702312431386674/1228422341126652074/1228778501063184454 As for "when", asking a maintainer would be more appropriate But right now, there is no choice but to use matches

deep-jade•3w ago

maybe you can use a react portal?

underlying-yellow•3w ago

yes we have planned to add parallel routes. wont happen very soon

Gaming

Programming

route api to support more than one outlet

Did you find this page helpful?