Two ways of putting page navigation to all pages with React Router(v6)
Tags: react, beginners
Published: 2022-05-24 05:12:57

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](#create-layout-component)

 2. [Leverage Outlet and index](#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
```javascript
    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
```javascript
    import Navigation from "./Navigation";

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

    export default Layout;
```
App.js
```javascript
    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](https://codesandbox.io/s/tender-sea-5f8cvr?file=/src/App.js).

## 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](https://reactrouter.com/docs/en/v6/getting-started/concepts#nested-routes).
>  Nested Routes — Because routes can have children and each route defines a portion of the [URL](https://reactrouter.com/docs/en/v6/getting-started/concepts#url) through [segments](https://reactrouter.com/docs/en/v6/getting-started/concepts#segment), a single URL can match multiple routes in a nested “branch” of the tree. This enables automatic layout nesting through [outlet](https://reactrouter.com/docs/en/v6/getting-started/concepts#outlet), [relative links](https://reactrouter.com/docs/en/v6/getting-started/concepts#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
```javascript
    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
```javascript
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](https://codesandbox.io/s/morning-firefly-b9e14t?file=/src/App.js).

Thank you for reading :)

The original article is [here](https://medium.com/@lada496/two-ways-of-putting-page-navigation-to-all-pages-with-react-router-v6-29d1263d3a84)