Outlet works only with one level of nesting

[ronyv89]

I assumed that in nested routes, the outlet will be passed on to all the deep nested routes. But as soon as I introduce another nested level, the content from the parent route is not passed on to the child route. This is required if I want to use some kind of navbar. Is there any way this can be achieved?

[sergiodxa]

First, why this happens, each Outlet renders a new Provider for the context it uses internally, and because there's no way to automatically know how to merge your Outlet data React Router (because this comes from RR not from Remix) can't automatically extend the data.

Now, a few ideas:

1. Whenever you render an Outlet call useOutletContext, get the parent route data and pass it to the new Outlet.
2. Create a specific context for your nabber, this is probably the safest thing to do.
3. If your data from the navbar comes from the loader result you can use the useMatches hook to access it from any other route (child or parent, doesn't matter).
4. If your data is static, add it to the handle export and use the useMatches hook to access it from any other route like with the loader data.

[ronyv89]

I was looking at the wrong documentation. I got it working by defining the common layout file with the "__" prefix.