How to use Context/ ContextProvider with File Routes

If you are using FileRoutes and want to use a context around your entire app is there how exactly do you do? I've been using https://www.youtube.com/watch?v=ndB7PwS1yqk&t=309s as a guide but they don't use file routes. My assumption was to do this, in root.tsx
<ContextProvider>
<Routes>
<FileRoutes />
</Routes>
</ContextProvider>
<ContextProvider>
<Routes>
<FileRoutes />
</Routes>
</ContextProvider>
The Net Ninja
YouTube
Solid JS Tutorial #14 - Context
In this Solid js tutorial you'll learn how to use Context to create global state. 🚀🥷🏼Get early access to this entire course now on Net Ninja Pro: https://netninja.dev/p/solid-js-tutorial 📂🥷🏼 Access the course files on GitHub: https://github.com/iamshaunjp/solid-js-tutorial 💻🥷🏼 Modern JavaScript Tutorial: On Net Ninja Pro - https://netninja.de...
8 Replies
oneiro
oneiro11mo ago
I am not quite sure, but I believe you would have to wrap each route individually, as you need to have a distinction between server- and client-side rendered content (I might be wrong, though)
Carlo Nyte
Carlo Nyte11mo ago
Really? Hmm that'd be a bummer
Tommypop
Tommypop11mo ago
You can just wrap the <FileRoutes /> with your provider, like you did in your assumption, and that should work fine
oneiro
oneiro11mo ago
awesome
Carlo Nyte
Carlo Nyte11mo ago
If you wanted to make multiple context are you then just stacking them on top of each other?
<OneContextProvider>
<TwoContextProvider>
<ThreeContextProvider>
<Routes>
<FileRoutes />
</Routes>
</ThreeContextProvider>
</TwoContextProvider>
</OneContextProvider>
<OneContextProvider>
<TwoContextProvider>
<ThreeContextProvider>
<Routes>
<FileRoutes />
</Routes>
</ThreeContextProvider>
</TwoContextProvider>
</OneContextProvider>
Tommypop
Tommypop11mo ago
Yeah, that should work fine
Carlo Nyte
Carlo Nyte11mo ago
Thanks!