[React] Routes와 Route이해하기

Routes와 Route 이해하기

• Routes와 Route 이해하기
• Routes와 Route 사용 방법

---

Routes와 Route 이해하기

React는 SPA(Single Page Application)를 만들기 위한 프레임 워크입니다. SPA에서는 단일 페이지를 가지므로 화면의 전환을 Route를 통하여 어떠한 내용을 띄울 것인지 정할 수 있습니다.

Routes는 Route의 복수형으로 Route를 묶어주는 역할을 하고 기존의 Switch의 역할을 하게 됩니다. Routes를 사용하지 않고 Route를 나열한다면 조건에 맞는 Route를 다 보여주게 됩니다. Route가 실질적인 역할을 합니다.

<Routes>
    <Route path="/라우터명" element={<div>기본</div>}></Route>
    <Route path="/라우터명/추가 라우터명" element={<div>추가</div>}></Route>
</Routes>

 

위와 같이 Routes로 감싸는 경우 현재 주소의 라우터가 "/라우터명/추가 라우터명"이라면 <div> 추가 </div>만 화면에 출력됩니다.

<Route path="/라우터명" element={<div>기본</div>}></Route>
<Route path="/라우터명/추가 라우터명" element={<div>추가</div>}></Route>

위와 같이 Routes로 감싸지 않는 경우 현재 주소의 라우터가 "/라우터명/추가 라우터명"이라면 "/라우터명"의 조건도 만족하므로 화면에는 <div> 기본 <div>, <div> 추가 </div>두 가지가 화면에 보이게 됩니다.

---

Routes와 Route 사용 방법

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

render(<BrowserRouter><App /></BrowserRouter>);

우선 root가 되는 컴포넌트를 BrowserRouter로 감싸주어야 합니다.

감싼 이후에는 루트 컴포넌트 안에서 Routes와 Route를 사용하는 것에 대하여 문제가 없습니다.

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

const 컴포넌트 명 = ()=>{
    return {
    	<div>
            <div>여기는 header처럼 페이지가 변하여도 보일 내용입니다.<div>
            <Routes>
            	<Route path="/" element={<div> "/"라우터는 현재 화면에 띄웁니다.</div>}></Route>
                <Route path="/here" element={<div>"/here"라우터로 이동하면 보입니다.</div>></Route>
            </Routes>
        </div>
    }
}

위와 같이 컴포넌트를 만들 때 Routes로 Route를 감싸주고 Route를 사용합니다 Route의 설정으로 어떤 경로일 때 어떠한 element를 출력할 것인지 path와 element를 이용하여 설정해줍니다.

 

Route를 이동하는 useNavigate 이해하러 가기