The root route file, app/root.jsx, is the global layout of the entire app.
It’s responsible for rendering the “outer” HTML structure, and embedding scripts and styles.
Here’s the one created by the default app:
import { cssBundleHref } from '@remix-run/css-bundle'
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react'
export const links = () => [
...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
]
export default function App() {
return (
<html lang='en'>
<head>
<meta charSet='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
)
}
NOTE: if you see errors (red lines) in VS Code, add this jsconfig.json file to the root of the project:
{
"compilerOptions": {
"jsx": "react-jsx"
},
}
You can customize anything in here, but this is a starting point that will provide the general HTML structure of your app.
You can see that inside the <head> tag we embed some meta tags and then we have the <Meta /> and <Links /> components which are imported from @remix-run/react.
Any route can export 2 functions called meta and links which return an array of metatags and import links (favicon, stylesheet, …) to add to the document head, and those will be embedded by those components.
This route itself exports a links function which embeds the optional CSS bundler that Remix provides, and that is added to the page by the <Links /> component.
Then inside the <body> tag we first embed <Outlet /> which is basically the “space” for the child route to be embedded in. Here’s where the content will appear.
Then we embed <ScrollRestoration /> which is responsible for making sure that if the page reloads we keep the scroll position in the right place, <Scripts /> which add the client JavaScript (React and any other library you need), and <LiveReload /> which is responsible for adding the scripts to implement the live reloading feature. You know, when you save a file in the editor and the UI refreshes in the browser through “hot module reloading”.
We’ll later see how to modify this to include custom CSS and adding Tailwind support.