is there any way to pass state in /x and get it in /x/y and /x/z routes?

[imtheaman]

I have an Outlet component at /x which y & z are children of, i need state value in /x/y and /x/z & /x/other routes.

[jfstn]

You can try this: https://reactrouter.com/en/main/hooks/use-outlet-context

[imtheaman]

well, i'm passing state via navigate method call, using context on Outlet would definitely do the work. is there any direct way possible via browser's history api? here in this soln. we're using context api
Thanks @jfstn

[kiliman]

With Remix, it's best to return state from your loaders. Then, in your child routes, you can access the data from useMatches or useRouterLoaderData.

https://remix.run/docs/en/main/hooks/use-matches
https://remix.run/docs/en/main/hooks/use-route-loader-data

[sergiodxa]

When you navigate from /x/y to /x/z you could use the location.state to pass the value, then access it using useLocation().state and initialize a new useState with that value, setting some good default in case the user opened /x/z before going to /x/y

Another option is to you search params, which will also work with SSR, but this would mean the user can bookmark or share the URL and resume or share the state, if that's not desirable then using location.state is better.

Finally, this is still a React app, so React app solutions also work, you could move the state from /x/y to /x and then use the outlet context to pass both the state and the setter to the children routes, another options could be to keep the state outside React, like using a state management lib, e.g. Redux, Zudstand, etc.