❏ react - react-router-dom으로 중첩 라우팅(nested routes)사용하기.

 

안녕하세요!

 

오늘은 react-router-dom를 사용해서 중첩 라우팅(nested routes)을 사용해 보겠습니다.

 

일단 중첩 라우팅(nested routes)에 대해서 알아보겠습니다.

---

✏ 중첩 라우팅(nested routes)

 

중첩 라우팅이란 웹 페이지에서 서브페이지를 만드는 것을 생각해 보면 됩니다.

해당하는 페이지에서 조금 더 구체적으로 구분을 지어 화면을 교체(표시) 해줄 필요가 있을 때 사용됩니다.

 

예를 들어 메인 페이지 주소  shop/main으로 이동했었을 때 쇼핑몰에 게시된 상품들이 나열되어 있다고 생각해 봅시다.

 

여러 상품들 중 하나의 상품을 클릭하면 해당하는 상품의 상세 페이지를 보여주고 싶을 때 중첩 라우팅을 사용할 수 있습니다.

 

그렇기에 shop/main/01과 같은 URL을 입력했다면 쇼핑몰 상품의 01번째 아이템 페이지가 나타나야 합니다.

 

 

 

✏ react-router-dom 사용하기

 

1. 설치

 

먼저 터미널에서 확장 프로그램으로 설치를 진행해야 합니다.

터미널에 위의 내용처럼 작성을 해서 설치해 줍니다. (맨 끝 @(골뱅이)는 버전을 선택하는 방법입니다.)

 

설치를 완료 후엔 package.json으로 이동하여 확인해 봅시다!

설치가 된걸 확인할 수 있었습니다.

 

2. 적용

 

index.js 파일에서 App 컴포넌트를 BrowserRouter가 감싸도록 작성해 줍시다.

import { BrowserRouter } from 'react-router-dom';

/* index.js */
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

 

 

 

✏ 중첩 라우팅(nested routes) 사용하기

 

App.js 파일로 돌아와서 시작해 봅시다. 

 

중첩된 라우터를 사용하려면 다음과 같이 react router dom으로부터 import 해야 합니다.

 

import {Routes, Route, Link} from "react-router-dom"

import Home from "./pages/Home"
import About from "./pages/About"
import Blog from "./pages/Blog"

function App() {
  return (
    <div className="App">
      <nav>
        <Link to ="/">Home</Link> / 
        <Link to ="/about">About</Link> /
        <Link to ="/blog">Blog</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </div>
  );
}

여기서 코드를 보시면 <Link>의 to의 값과 <Route>의 path의 값이 동일한 것을 볼 수 있답니다.

 

그러니 짝 맞추기처럼의 to의 값과 의 path동일한 값을 지정해 줘야지 페이지가 변환이 된답니다.

 

그럼 중첩 라우팅으로 해당되는 컴포넌트를 불러와 구동이 되는 화면을 볼 수 있습니다!

---

더 자세한 설명은 공식 문서를 확인해 보세요!

 

👇👇👇  리액트 공식 문서 바로가기 👇👇👇 

 

https://ko.reactjs.org/docs/code-splitting.html?#route-based-code-splitting 

코드 분할 – React

 

👇👇👇  리액트라우터 공식 문서 바로가기 👇👇👇 

 

https://reactrouter.com/en/main

Home v6.8.1

---

오늘도 읽어주셔서 감사합니다!

♡ ٩(´▽`)۶ ♡