Layouts and private routes

[enheit]

Add examples to the documentation on how to configure layouts and private/protected routes using solidjs-router.

[Kamenow]

Any updates on this?

[NotAsea]

Actually implement Layout is not that hard i have a sample below

/**
 * dummy Component for sole purpose of checking user Sign in or Sign out, redirect to login page
 * 
 * 
 */
const Guard: Component = () => {
  const isUserSignin = /*Checking user sigin,signout*/
  const navigate = useNavigate()
  if (!isUserSignin) navigate('/login', { replace: true })
  return <Outlet />
}
/**
 * define your layout, call another header component, navbar etc.. then inner most is Outlet to render your component
 * 
 */
const Layout: Component = () => (
  <div style={{ 'background-color': 'orange' }}> 
    <Outlet />
  </div>
)
export const AppRouter: Component = () => (
  <Router>
    <Routes>
      <Route path="/" component={Layout}>
       { /*--^-- this is base route, will match first, then apply Layout Component above */}
          <Route path="" component={Guard}>
            <Route path={['', 'book']} component={lazy(() => import('./pages/book/BookShelf'))} />
             {/* all component inside will be check */}
          </Route>
        <Route path="login" component={lazy(() => import('./pages/auth/Login'))} />
      </Route>
    </Routes>
  </Router>
)

you can add more Child route into Layout, you can even define Child Layout and add Child component to this Child Layout...