Nested routes and layouts in Remix - Mini Project: Build & Apply

Nested Routes and Layouts in Remix

📖 Scenario: You are building a simple website with a main layout and nested pages for Home and About. The website should share a common header and footer on all pages using nested layouts.

🎯 Goal: Create nested routes and layouts in Remix so that the root layout shows a header and footer, and the home and about pages render inside the main layout.

📋 What You'll Learn

Create a root layout route with header and footer

Create nested routes for home and about

Use Outlet to render nested routes inside the root layout

Each nested route should display its own content inside the shared layout

💡 Why This Matters

🌍 Real World

Nested routes and layouts help build websites with consistent headers, footers, and sidebars while changing only the main content area.

💼 Career

Understanding nested routes and layouts is essential for building scalable React apps with Remix or similar frameworks like React Router.

1

Create the root layout with header and footer

Create a file called root.tsx with a React component named Root. Inside it, return a div containing a header with text "Site Header", an Outlet component, and a footer with text "Site Footer". Import Outlet from @remix-run/react.

Remix

import { Outlet } from '@remix-run/react'

// Your code here

Hint

Remember to import Outlet from @remix-run/react and use it inside your root layout component.

2

Create the home route component

Create a file called routes/index.tsx with a React component named Index. Return a div containing the text "Welcome to the Home Page".

Remix

import React from 'react'

// Your code here

Hint

The home route is the index.tsx file inside the routes folder. It renders inside the root layout's Outlet.

3

Create the about route component

Create a file called routes/about.tsx with a React component named About. Return a div containing the text "About Us Page".

Remix

import React from 'react'

// Your code here

Hint

The about page is a sibling route to the home page inside the routes folder.

4

Add navigation links to the root layout

In root.tsx, inside the header, add two <a> links: one with href="/" and text "Home", and another with href="/about" and text "About". This will allow navigation between pages.

Remix

import { Outlet } from '@remix-run/react'

export default function Root() {
  return (
    
      
        {/* Add navigation links here */}
      
      
        
      
      Site Footer
    
  )
}

import React from 'react'

export default function Index() {
  return Welcome to the Home Page
}

import React from 'react'

export default function About() {
  return About Us Page
}

Hint

Use simple anchor tags inside the header for navigation links.