Outlet
Outlet
is a component that renders the matched child route component inside a layout component.
tsx
<Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/>
tsx
<Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/>
Usage
Rendering the matched child route component inside a layout route component
The <Outlet>
component is used to indicate where child routes should be inserted into the parent when using nested routing. This is how one can achieve shared layouts that aren't replaced when navigating between pages. <Outlet>
is a re-export from @solidjs/router
.
routes/users/index.tsx
tsx
export default () => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Users</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>;
routes/users/index.tsx
tsx
export default () => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Users</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>;
routes/users/[id].tsx
tsx
export default () => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>User</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>;
routes/users/[id].tsx
tsx
export default () => <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>User</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>;
routes/users.tsx
tsx
import { Outlet(alias) const Outlet: () => JSX.Element
import Outlet
, A(alias) const A: (props: ComponentProps<typeof BaseA>) => JSX.Element
import A
} from "solid-start";
export default function UsersLayoutfunction UsersLayout(): JSX.Element
() { return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> We love our users! </h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> <Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/> <A(alias) const A: (props: ComponentProps<typeof BaseA>) => JSX.Element
import A
href(property) AnchorProps.href: string
="/">Back Home</A(alias) const A: (props: ComponentProps<typeof BaseA>) => JSX.Element
import A
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes/users.tsx
tsx
import { Outlet(alias) const Outlet: () => JSX.Element
import Outlet
, A(alias) const A: (props: ComponentProps<typeof BaseA>) => JSX.Element
import A
} from "solid-start";
export default function UsersLayoutfunction UsersLayout(): JSX.Element
() { return (
<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> We love our users! </h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> <Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/> <A(alias) const A: (props: ComponentProps<typeof BaseA>) => JSX.Element
import A
href(property) AnchorProps.href: string
="/">Back Home</A(alias) const A: (props: ComponentProps<typeof BaseA>) => JSX.Element
import A
> </div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
> );
}
routes.tsx
tsx
import { Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
} from "solid-start";
export default function OurRoutesfunction OurRoutes(): JSX.Element
() { return (
<Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users"
="/users"> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/"
="/" /> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/:id"
="/:id" /> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> );
}
routes.tsx
tsx
import { Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
} from "solid-start";
export default function OurRoutesfunction OurRoutes(): JSX.Element
() { return (
<Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users"
="/users"> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/"
="/" /> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/:id"
="/:id" /> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> );
}
Now our /users
and /users/:id
routes share a layout as each nested route elements will appear inside the parent element at the location where the <Outlet/>
was declared.
You can nest indefinitely but remember that only leaf nodes will become their own routes. In this example, the only route created is /layer1/layer2
, and it appears as three nested divs.
routes.tsx
tsx
import { Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
, Outlet(alias) const Outlet: () => JSX.Element
import Outlet
} from "solid-start";
export default function OurRoutesfunction OurRoutes(): JSX.Element
() { return (
<Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/" | "/"[]
='/' element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Onion starts here <Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/></div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>}> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "layer1" | "layer1"[]
='layer1' element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Another layer <Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/></div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>}> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "layer2" | "layer2"[]
='layer2' element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Innermost layer</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>}></Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> );
}
routes.tsx
tsx
import { Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
, Outlet(alias) const Outlet: () => JSX.Element
import Outlet
} from "solid-start";
export default function OurRoutesfunction OurRoutes(): JSX.Element
() { return (
<Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/" | "/"[]
='/' element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Onion starts here <Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/></div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>}> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "layer1" | "layer1"[]
='layer1' element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Another layer <Outlet(alias) const Outlet: () => JSX.Element
import Outlet
/></div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>}> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "layer2" | "layer2"[]
='layer2' element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>Innermost layer</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>}></Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> );
}