tsx
<Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
>...</Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
>
tsx
<Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
>...</Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
>
It is also the starting point for hydration for general Server-Side rendering and root of client rendering for non-SSR mode.
It is a required component and should usually be placed as an immediate child of the Html
component, after the Head
element. It should include a Scripts
component and render a Routes
component to render your application.
root.tsx
tsx
import { Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
, Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
, Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
, Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
, Scripts(alias) function Scripts(): JSX.Element
import Scripts
} from "solid-start";
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
/> <Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> <MyNavfunction MyNav(): JSX.Element
/> <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
/> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Scripts(alias) function Scripts(): JSX.Element
import Scripts
/> </Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
root.tsx
tsx
import { Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
, Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
, Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
, Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
, Scripts(alias) function Scripts(): JSX.Element
import Scripts
} from "solid-start";
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
/> <Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> <MyNavfunction MyNav(): JSX.Element
/> <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
/> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Scripts(alias) function Scripts(): JSX.Element
import Scripts
/> </Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
The cool part is that you don't have to change any of this as you try out SPA, SSR, Islands, Island Routing or any of SolidStart's other capabilities.