What is root route in remix

RemixConceptBeginner · 3 min read

Root Route in Remix: What It Is and How It Works

In Remix, the root route is the top-level route that wraps all other routes and defines the main layout or structure of your app. It is represented by the root.jsx or root.tsx file in the routes folder and controls shared UI like headers, footers, and error boundaries.

⚙️

How It Works

Think of the root route in Remix as the foundation of a house. Just like a foundation supports all the rooms, the root route supports all other pages and routes in your app. It sets up the common parts of your website, such as navigation bars, footers, or any layout that should appear on every page.

When a user visits your site, Remix first loads the root route. Then, depending on the URL, it loads the specific child route inside the root. This way, you don’t have to repeat the same layout code on every page. The root route acts like a frame holding all your pages together.

💻

Example

This example shows a simple root route in Remix that includes a header and an outlet where child routes will render.

jsx

import { Outlet } from "@remix-run/react";

export default function Root() {
  return (
    <html lang="en">
      <head>
        <title>My Remix App</title>
      </head>
      <body>
        <header>
          <h1>Welcome to My Site</h1>
          <nav>
            <a href="/">Home</a> | <a href="/about">About</a>
          </nav>
        </header>
        <main>
          <Outlet />
        </main>
        <footer>
          <p>© 2024 My Remix App</p>
        </footer>
      </body>
    </html>
  );
}

Output

<html lang="en"> <head> <title>My Remix App</title> </head> <body> <header> <h1>Welcome to My Site</h1> <nav> <a href="/">Home</a> | <a href="/about">About</a> </nav> </header> <main>  </main> <footer> <p>© 2024 My Remix App</p> </footer> </body> </html>

🎯

When to Use

Use the root route whenever you want to share layout or UI elements across multiple pages in your Remix app. It is perfect for adding headers, footers, navigation menus, or global styles that should appear everywhere.

For example, if your website has a consistent top menu and footer on all pages, place them in the root route. This avoids repeating code and keeps your app organized. Also, the root route is where you can handle global error boundaries or loading states that affect the entire app.

✅

Key Points

The root route is the top-level route in Remix that wraps all other routes.
It defines shared UI like headers, footers, and navigation.
Child routes render inside the root route’s <Outlet /> component.
Use it to avoid repeating layout code on every page.
It can also handle global error boundaries and loading states.

✅

Key Takeaways

The root route in Remix is the main layout that wraps all pages using the root.jsx or root.tsx file.

It holds shared UI elements like headers, footers, and navigation menus for the entire app.

Child routes render inside the root route’s component to keep layouts consistent.

Use the root route to manage global app structure and avoid repeating code on every page.