Two ways of putting page navigation to all pages with React Router(v6)

This is my memo when I try two different ways of putting a navigation bar to all pages with React Router.

1. Create Layout component

2. Leverage Outlet and index

Create Layout component

The file structure inside of src is the below.

src
 -components
  -layout
   -Layout.jsx
   -Navigation.jsx
 -pages
  -Home.jsx
  -Page1.jsx
  -Page2.jsx
  -Page3.jsx
App.js
index.js
styles.css

Navigation.jsx

    import { Link } from "react-router-dom";
    import styled from "styled-components";

    const NavigationContainer = styled.div`
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
    `;
    const LinksContainer = styled.div`
      display: flex;
      justify-content: space-around;
      gap: 10px;
    `;
    const Navigation = () => {
      return (
        <NavigationContainer>
          <Link to="/">
            <h1>Logo</h1>
          </Link>
          <LinksContainer>
            <Link to="/page1">Page1</Link>
            <Link to="/page2">Page2</Link>
            <Link to="/page3">Page3</Link>
          </LinksContainer>
        </NavigationContainer>
      );
    };
    export default Navigation;

Layout.jsx

    import Navigation from "./Navigation";

    const Layout = ({ children }) => {
      return (
        <>
          <Navigation />
          <main>{children}</main>
        </>
      );
    };

    export default Layout;

App.js

    import { Routes, Route } from "react-router-dom";
    import Layout from "./components/layout/Layout";
    import Home from "./pages/Home";
    import Page1 from "./pages/Page1";
    import Page2 from "./pages/Page2";
    import Page3 from "./pages/Page3";
    import "./styles.css";
    export default function App() {
      return (
        <Layout>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="page1" element={<Page1 />} />
            <Route path="page2" element={<Page2 />} />
            <Route path="page3" element={<Page3 />} />
          </Routes>
        </Layout>
      );
    }

The whole code is available here.

Leverage Outlet and index

We can leverage nested routes and outlet so that Navigation route can be a parent route and all other pages to be its children.

Here is the explanation by the official document.

Nested Routes — Because routes can have children and each route defines a portion of the URL through segments, a single URL can match multiple routes in a nested “branch” of the tree. This enables automatic layout nesting through outlet, relative links, and more.

The file structure inside of src is the below.

src
 -routes
  -Home.jsx
  -Navigatoin.jsx
  -Page1.jsx
  -Page2.jsx
  -Page3.jsx
App.js
index.js
styles.css

Navigation.jsx

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

    const NavigationContainer = styled.div`
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
    `;
    const LinksContainer = styled.div`
      display: flex;
      justify-content: space-around;
      gap: 10px;
    `;
    const Navigation = () => {
      return (
        <>
          <NavigationContainer>
            <Link to="/">
              <h1>Logo</h1>
            </Link>
            <LinksContainer>
              <Link to="/page1">Page1</Link>
              <Link to="/page2">Page2</Link>
              <Link to="/page3">Page3</Link>
            </LinksContainer>
          </NavigationContainer>
          <Outlet />
        </>
      );
    };
    export default Navigation;

App.js

Use index attribute to navigate the same path as the parent path.

    import { Routes, Route } from "react-router-dom";
    import Navigation from "./routes/Navigation";
    import Home from "./routes/Home";
    import Page1 from "./routes/Page1";
    import Page2 from "./routes/Page2";
    import Page3 from "./routes/Page3";
    import "./styles.css";

    export default function App() {
      return (
        <Routes>
          <Route path="/" element={<Navigation />}>
            <Route index element={<Home />} />
            <Route path="page1" element={<Page1 />} />
            <Route path="page2" element={<Page2 />} />
            <Route path="page3" element={<Page3 />} />
          </Route>
        </Routes>
      );
    }

The whole code is available here.

Thank you for reading :)

The original article is here