050. React - 페이지 라우팅 - 라우팅 설정

사용할 라이브러리

가장 많이 사용하는 라우팅 라이브러리인 react-routing-dom을 이용하여 실습한다.

설치 방법

npm install react-router-dom

의존성과 마찬가지로 프로젝트마다 세팅해주는 것.

import하기

// main.jsx
import { BrowserRouter } from "react-router-dom";

// <App> 컴포넌트의 부모 컴포넌트로 감싸기
<BrowserRouter>
    <App/>
</BrowserRouter>

만들 페이지(컴포넌트) 구상하기

만약 메인(홈)을 포함해서 3개의 페이지를 만든다면,

1. "/" : Home.jsx
2. "/Diary" : Diary.jsx
3. "/Detail" : Detail.jsx

위와 같이 src 폴더 내에 pages 폴더를 만들고 컴포넌트들을 만들어 준다.

그리고 App.jsx 컴포넌트 내에 모두 import 해준다.

import Home from "./pages/Home";
import Diary from "./pages/Diary";
import Detail from "./pages/Detail";

페이지 경로 설정하기

1. "/" : Home.jsx
2. "/Diary" : Diary.jsx
3. "/Detail" : Detail.jsx

큰 따옴표 안에 있는 주소를 입력했을 때 해당 페이지를 보여주기 위해서 별도의 작업이 필요하다.

// route 임포트하기
import { Routes, Route } from "react-router-dom"; 
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import Detail from "./pages/Detail";

// return문 최상위 컴포넌트에서 프래그먼트를 지우고 <Routes> 컴포넌트로 감싸기
function App() {

    return(
        <Routes>
        </Routes>
    )
}

// Routes 컴포넌트의 자식 컴포넌트로 Route 컴포넌트와 props 지정하기
function App() {
    return(
        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/diary" element={<Diary/>} />
            <Route path="/detail" element={<Detail/>} />
        </Routes>
    )
}

없는 경로(Not found) 입력했을 때 보여줄 페이지 라우팅하기

만약 path로 설정하지 않은 엉뚱한 경로를 입력했을 때 '페이지가 없습니다.' 와 같은 페이지를 보여주고 싶다면 Notfound.jsx 컴포넌트를 하나 만들고 위의 방식처럼 import 한 뒤 path에 *하나만 입력해주면 된다.

function App() {
    return(
        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/diary" element={<Diary/>} />
            <Route path="/detail" element={<Detail/>} />
            <Route path="*" element={<Notfound/>} />
            {/* 위의 모든 path에 해당하지 않을 경우 * path로 연결함. */}
        </Routes>
    )
}

주의사항

Routes 컴포넌트 내부에는 Route 컴포넌트 호출만 가능

function App() {
    return(
        <Routes>
            <h1>안녕하세요</h1> {/* 이런 거 불가능함. */}
            <Route path="/" element={<Home/>} />
            <Route path="/diary" element={<Diary/>} />
            <Route path="/detail" element={<Detail/>} />
            <Route path="*" element={<Notfound/>} />
        </Routes>
    )
}

Routes 컴포넌트 바깥에는 프래그먼트를 씌우고 그 안에는 jsx 작성 가능함

다만 모든 Route에 공통적으로 렌더링 된다.

function App() {
    return(
        <>
        <h1>이건 가능함. 다만 아래의 모든 라우터에도 공통적으로 출력됨.</h1>

        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/diary" element={<Diary/>} />
            <Route path="/detail" element={<Detail/>} />
            <Route path="*" element={<Notfound/>} />
        </Routes>

        </>
    )
}