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
oneiro3y 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)
Lo | Building Dromo
Really? Hmm that'd be a bummer
Tommypop
Tommypop3y ago
You can just wrap the <FileRoutes /> with your provider, like you did in your assumption, and that should work fine
oneiro
oneiro3y ago
awesome
Lo | Building Dromo
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
Tommypop3y ago
Yeah, that should work fine
Lo | Building Dromo
Thanks!

Did you find this page helpful?