[Support] How to pass a variable to <Outlet />?
Closed this issue · 2 comments
I want to find out how to manage variables that are stored in index.tsx or Layout.tsx. In my specific case, I have dark mode implemented on my website. This is controlled by variables I am storing in Layout.tsx. I also have a blog built out, accessible at pages/posts/[postname] that I want to also receive and respect the dark mode setting. Effectively I need to be able to pass props to the <Outlet/> component that is called in Layout.tsx. Can you help me figure out how to achieve this?
The Outlet is provided by react-router and should not accept parameters; it is only used to render the matching route view. Based on your scenario, you should use a Context to wrap your Layout (or Outlet), and then use useContext to retrieve the state where it is needed.
If you have any questions regarding usage, feel free to ask me. I will respond as soon as possible.