S
SolidJS•15mo ago
Lo | Building Dromo

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
Lo | Building Dromo
Lo | Building DromoOP•15mo 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
Brendonovich•15mo ago
Yeah this is recommended, either put context outside the router, in the router root, or in layout routes
Lo | Building Dromo
Lo | Building DromoOP•15mo ago
K awesome! Thank you

Did you find this page helpful?