Talking to the child outlet from root.ts to get info

[kof]

I can see only 2 options that would allow me to set a class on the body based on the route I am at, given that the name of the class is only known in the subroute module, because its dynamic, e.g. being fetched from a database.

1. Have a second root2.tsx for that route and have it fetch in loader the info
2. Talk to the nested child route in some way to get the info

So far I couldn't find a good way to do it, what am I missing?

[sergiodxa]

You can use the useMatches hook to get the data returned by any route, including child routes.

[kof]

Yeah I saw this possibility, but feels like a hack, misused api, what I really want is an official way to use a different root.tsx

[kiliman]

Remember, all an <Outlet/> does is specify the place where its child route should be rendered. Kind of like using the {children} prop in React.

So by simply returning <Outlet/> in the root, you're pushing the page layout responsibility to its child layouts, where you can now have multiple.

[kiliman]

A common use for this is different layouts for public vs protected routes.

[kof]

Got it, I just didn't imagine for some reason moving Root's definitions into an Outlet, as if Root is a special place to be lol

[kiliman]

The only distinction of root is that it's at the top of the route tree. Nothing else.

[kof]

Yep, I was mentally blocked on this realization because its called Root and not Outlet or RootOutlet or something