React Router(v6)를 사용하여 모든 페이지에 페이지 탐색을 넣는 두 가지 방법

이것은 React Router로 모든 페이지에 내비게이션 바를 배치하는 두 가지 다른 방법을 시도했을 때 메모한 것입니다.

Create Layout component

Leverage Outlet and index

레이아웃 구성 요소 만들기

src 내부의 파일 구조는 아래와 같습니다.

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>
      );
    }

전체 코드를 사용할 수 있습니다here.

아울렛 및 인덱스 활용

내비게이션 경로가 상위 경로가 되고 다른 모든 페이지가 하위 경로가 되도록 중첩된 경로와 콘센트를 활용할 수 있습니다.

다음은 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.

src 내부의 파일 구조는 아래와 같습니다.

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>
      );
    }

전체 코드를 사용할 수 있습니다here.

읽어 주셔서 감사합니다 :)

원본 기사는 here입니다.