The TL;DR; is that there doesn't seem to be a canonical approach to handling private vs public routes such that repetition is avoided -- I.E some type of middleware or guard.
I posted what I'm currently playing around with and will add it here for feedback, though in its current state it isn't working as expected. When using nested routes in the config-based approach this doesn't work.
<Router root={App}> <For each={routes}> {(route) => { // This approach assumes private by default if (route.info?.public) { return <Route component={route.component} />; } return ( <Route component={(props) => ( // Where `AuthGuard` contains redirect/navigate logic <AuthGuard>{route.component?.(props)}</AuthGuard> )} /> ); }} </For></Router>
<Router root={App}> <For each={routes}> {(route) => { // This approach assumes private by default if (route.info?.public) { return <Route component={route.component} />; } return ( <Route component={(props) => ( // Where `AuthGuard` contains redirect/navigate logic <AuthGuard>{route.component?.(props)}</AuthGuard> )} /> ); }} </For></Router>
Assume you have a SPA that includes several public Routes and several private Routes that require an authenticated user. Ideally, I'd like to wrap all of those protected Routes under a single c...