Context providers inside <Routes> don't provide context values to routed content - Issue #273

This works:

<FooProvider>
  <Routes>
    <Route path=... component=... /> // the elements have access to context values
  </Routes>
</FooProvider>

<FooProvider>
  <Routes>
    <Route path=... component=... /> // the elements have access to context values
  </Routes>
</FooProvider>

This doesn't:

<Routes>
  <FooProvider>
    <Route path=... component=... /> // the elements don't have access to context values
  </FooProvider>
</Routes>

<Routes>
  <FooProvider>
    <Route path=... component=... /> // the elements don't have access to context values
  </FooProvider>
</Routes>

The solution that Ryan had provided here worked with solid-router 0.9.x but now with version 0.10.x it no longer work since <Outlet /> component and the element attribute no longer exist.

<Routes> <AuthRoutes /> <FinanceRoutes /> <CalendarRoutes /> </Routes> function AuthRoutes = () => { return <Route path="" element={<I18nProvider namespaces={['auth']}><Outlet /></I18nProvider>}> <Route path=... element=... /> <Route path=... element=... /> <Route path=... element=... /> </Route> }

Does anyone know what the new solution is?

GitHub

Context providers inside `` don't provide context values to routed ...

Describe the bug This works: <FooProvider> <Routes> <Route path=... element=... /> // the elements have access to context values </Routes> </FooProvider> This doesn...

3 Replies

Carlo Nyte•3w ago

I guess this is a solution?

const AuthComponent = (props) => {
  return (
    <I18nProvider namespaces={['auth']}>
      {props.children}
    </I18nProvider>
  )
}
function AuthRoutes = () => {
  return <Route path="" component={AuthComponent}>
    <Route path=... component=... />
    <Route path=... component=... />
    <Route path=... component=... />
  </Route>
}

const AuthComponent = (props) => {
  return (
    <I18nProvider namespaces={['auth']}>
      {props.children}
    </I18nProvider>
  )
}
function AuthRoutes = () => {
  return <Route path="" component={AuthComponent}>
    <Route path=... component=... />
    <Route path=... component=... />
    <Route path=... component=... />
  </Route>
}

It works but it feels wrong for some reason..

Brendonovich•3w ago

Yeah this is recommended, either put context outside the router, in the router root, or in layout routes

Carlo Nyte•3w ago

K awesome! Thank you

Gaming

Programming

Context providers inside <Routes> don't provide context values to routed content - Issue #273