React JS Layout Setup with Outlet: A Step-by-Step Guide

React JS Layout Setup Using Outlet – A Complete Guide

Introduction

When building a React app, managing layouts efficiently is essential for maintaining a structured UI. React Router’s Outlet allows you to create a parent layout that wraps around child components, making it easier to manage navigation and structure.

In this guide, we’ll set up a React layout using Outlet and understand how to use nested routing for better application flow.

1. What is Outlet in React Router?

Outlet is a component provided by React Router that renders the child components of a given route dynamically. It helps create reusable layout structures, reducing redundant code.

Why use Outlet?

• Creates a structured layout
• Enables nested routes
• Avoids duplicate layout code in child components
• Enhances maintainability

2. Installing React Router DOM

Before using Outlet, you need to install React Router if you haven’t already:

npm install react-router-dom

3. Setting Up the Layout Component

Let’s create a Layout component that includes a navbar, footer, and an Outlet for child components.

Layout.js

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <main>
        <Outlet />  {/* Child components will be rendered here */}
      </main>
      <footer>© 2025 My Website</footer>
    </div>
  );
};

export default Layout;

4. Defining Routes with Nested Structure

Now, define the routes in App.js and use Outlet for rendering nested components.

App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

5. Creating Child Components

Now, create individual components for Home, About, and Contact.

Home.js

const Home = () => <h2>Welcome to the Home Page</h2>;
export default Home;

About.js

const About = () => <h2>About Us</h2>;
export default About;

Contact.js

const Contact = () => <h2>Contact Page</h2>;
export default Contact;

6. Running the Application

Start the development server:

npm start

Now, when you navigate to /about or /contact, only the Outlet content updates while the navbar and footer remain persistent.

Using Outlet in React Router is an efficient way to structure layouts and manage nested routes. It improves maintainability and ensures a consistent UI across different pages.

Key Takeaways:

✔️ Outlet dynamically renders child components inside a layout
✔️ Reduces redundant layout code in multiple components
✔️ Enables better route management with nested structures