SamwithCode

AppLayout in React Router 2025

๐Ÿงฉ What is AppLayout?

In React Router v6.4+, a layout route (like AppLayout) is a component that wraps shared UI (like navbar, footer, or sidebar) and uses an to render child routes inside it. This is perfect for dashboard-style apps or websites where parts of the layout remain consistent across pages.

๐Ÿ“ฆ Example Structure:

src/
โ”œโ”€โ”€ App.js
โ”œโ”€โ”€ layouts/
โ”‚   โ””โ”€โ”€ AppLayout.jsx
โ”œโ”€โ”€ pages/
โ”‚   โ”œโ”€โ”€ Home.jsx
โ”‚   โ”œโ”€โ”€ About.jsx
โ”‚   โ””โ”€โ”€ Contact.jsx
โ””โ”€โ”€ main.jsx

๐Ÿ›  1. Install React Router

npm install react-router-dom

๐Ÿ›  2. Create AppLayout.jsx

// layouts/AppLayout.jsx
import { Outlet, Link } from "react-router-dom";

export default function AppLayout() {
  return (
    

      

        
      


      

        
      


      

        © 2025 My Website
      

    

  );
}

๐Ÿ›  3. Define Routes in App.jsx

// App.js
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AppLayout from "./layouts/AppLayout";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

const router = createBrowserRouter([
  {
    path: "/",
    element: ,
    children: [
      { path: "/", element:  },
      { path: "about", element:  },
      { path: "contact", element:  },
    ],
  },
]);

export default function App() {
  return ;
}

๐Ÿ›  4. Example Pages

// pages/Home.jsx
export default function Home() {
  return 
Welcome to Home
;
}

// pages/About.jsx
export default function About() {
  return 
About Us
;
}

// pages/Contact.jsx
export default function Contact() {
  return 
Contact Page
;
}

โœ… Final Output

All pages (Home, About, Contact) will show inside AppLayout, keeping the navbar and footer consistent.