SolidJSS
SolidJS•2y ago•
7 replies
Calhistorian

Placement of Context Providers and Routes (Router 10.10)

I have an existing application which uses several context providers for sharing data between routes. My question is where do I place the context providers in relation to the route definitions using SolidJS/Router v10+. Is it acceptable to put context providers above the <Router>?

Environment: Electron/SolidJS, <HashRouter>

The Solid Router docs state:
2. Provide a root level layout
This will always be there and won't update on page change. It is the ideal place to put top level navigation and Context Providers

If I set up like this as suggested by the docs:
main.tsx (simplified)
render(() => {
  return (
    <HashRouter root={App}>
      <Route path='/home component={Home} />
      <Route path='/search component={Search} />
      <Route path='/settings component={Settings} />
    </HashRouter>
)}, root);


app.tsx (simplified)
const App = () => {

  // ... various data fetching functions to cache in providers

  return (
    <Provider>
      <AppWindow>
        <Nav>
        {props.children}
      </AppWindow>
    </Provider>
  )
};
Was this page helpful?