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>

<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

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);

render(() => {
  return (
    <HashRouter root={App}>
      <Route path='/home component={Home} />
      <Route path='/search component={Search} />
      <Route path='/settings component={Settings} />
    </HashRouter>
)}, root);

app.tsx

app.tsx

(simplified)

const App = () => {

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

  return (
    <Provider>
      <AppWindow>
        <Nav>
        {props.children}
      </AppWindow>
    </Provider>
  )
};

const App = () => {

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

  return (
    <Provider>
      <AppWindow>
        <Nav>
        {props.children}
      </AppWindow>
    </Provider>
  )
};

SolidJS•3y ago•

7 replies

Calhistorian

Placement of Context Providers and Routes (Router 10.10)

<Router>

<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

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);

render(() => {
  return (
    <HashRouter root={App}>
      <Route path='/home component={Home} />
      <Route path='/search component={Search} />
      <Route path='/settings component={Settings} />
    </HashRouter>
)}, root);

app.tsx

app.tsx

(simplified)

const App = () => {

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

  return (
    <Provider>
      <AppWindow>
        <Nav>
        {props.children}
      </AppWindow>
    </Provider>
  )
};

const App = () => {

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

  return (
    <Provider>
      <AppWindow>
        <Nav>
        {props.children}
      </AppWindow>
    </Provider>
  )
};

Placement of Context Providers and Routes (Router 10.10)

Similar Threads

Placement of Context Providers and Routes (Router 10.10)

Similar Threads

Similar Threads

Similar Threads