SolidJS•16h ago

Passing signals as props in a Route component

Hello, I'm trying to render children elements of a route (solid router) while also passing signals as props in a route component. My current implementation looks like this:

<Route component={() =>
  <ProtectedRoutes isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated}>
    <Route path="/" component={Home} />
    <Route path="/some-route" component={SomeRoute} />
    <Route path="/some-other-route" component={SomeOtherRoute} />
  </ProtectedRoutes>
}
/>

<Route component={() =>
  <ProtectedRoutes isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated}>
    <Route path="/" component={Home} />
    <Route path="/some-route" component={SomeRoute} />
    <Route path="/some-other-route" component={SomeOtherRoute} />
  </ProtectedRoutes>
}
/>

but when I read props.children in the ProtectedRoutescomponent, it gets interpreted as an array of component and does not render based on the current path. Doing this works (props.children render well in ProtectedRoutes as it become a BoundFunctionObject) but then I can't pass props to ProtectedRoutes (at least there does not seems to be way to do it ?)

<Route component={ProtectedRoutes}>
  <Route path="/" component={Home} />
  <Route path="/some-route" component={SomeRoute} />
  <Route path="/some-other-route" component={SomeOtherRoute} />
</Route>

<Route component={ProtectedRoutes}>
  <Route path="/" component={Home} />
  <Route path="/some-route" component={SomeRoute} />
  <Route path="/some-other-route" component={SomeOtherRoute} />
</Route>

I also would want to avoid using Context as this seem overkill for my use case (maybe i'm wrong?). I would appreciate if someone could give me a hint as to how I could manage to do this 🙂

4 Replies

Madaxen86•15h ago

<Route component={()=> <ProtectedRoutes isAuthenticated={isAuthenticated
}/>}
>
…

<Route component={()=> <ProtectedRoutes isAuthenticated={isAuthenticated
}/>}
>
…

cocoOP•14h ago

yes that's my current implementation but I can't retrieve sub routes that way and render it with props.children (in ProtectedRoutes)

Madaxen86•14h ago

Maybe

<Route component={(props)=> <ProtectedRoutes isAuthenticated={isAuthenticated {…props}
}/>}
>
…

<Route component={(props)=> <ProtectedRoutes isAuthenticated={isAuthenticated {…props}
}/>}
>
…

cocoOP•14h ago

awesome it worked ! thank you so much ! I ended up doing this

<Route component={(props) => <ProtectedRoutes isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated} children={props.children}/>}>
  <Route path="/" component={Home} />
  <Route path="/some-route" component={SomeRoute} />
  <Route path="/some-other-route" component={SomeOtherRoute} />
</Route>

<Route component={(props) => <ProtectedRoutes isAuthenticated={isAuthenticated} setIsAuthenticated={setIsAuthenticated} children={props.children}/>}>
  <Route path="/" component={Home} />
  <Route path="/some-route" component={SomeRoute} />
  <Route path="/some-other-route" component={SomeOtherRoute} />
</Route>

Gaming

Programming

Passing signals as props in a Route component