<aside> 💡 v6은 2021년 11월에 나왔습니다. 바뀐 부분은 하단에 명시되어 있으며 해당 강의자료는 v6로 진행됩니다. 기존에 있었던 React Router v4/5 docs 기준 강의자료를 가장 하단에 백업 페이지로 남겨두었으니 참고 바랍니다.

22년 11월 기준 6.4.3 Version

</aside>

V5 : https://v5.reactrouter.com/

1. 설치하기

먼저 라우트 설정을 위해 react-router-dom 을 설치해 주겠습니다.

npm install react-router-dom

<aside> 🧐 혹시 에러가 발생하나요?

설치를 할 때 Window에서 [eslint] Plugin "react" was conflicted애러를 만나실 수 있습니다. 이는 플러그인 충돌로 나오는 문제이며 이를 해결하기 위해 Git Bash 터미널 창을 하나 더 여셔서 작업하시는 것을 권해드립니다. 아래 작업으로 문제를 해결할 수 있으나 굳이 다운그래이드를 하시는 것을 권하지 않습니다.

<추천하지 않는 해결법>
1. (작동시에만 문제 없도록, 빌드되도 문제 안생깁니다.) package.json 파일을 열고, Ctrl + S 로 저장해주기
2. eslint-config-react-app 버전을 6으로 다운그래이드
	- 현재 버전 삭제 : npm remove eslint-config-react-app
	- 다운그래이드 설치 : npm install eslint-config-react-app@6

</aside>

2. BrowserRouter, Routes, Route

우선 간단한 실습을 통해 BrowserRouter, Routes, Route가 어떤 역할을 하는지 알아보겠습니다.

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

function App() {
  return (
    <BrowserRouter>
      {/* 라우트를 감싸줍니다. */}
      <Routes>
        <Route path="/" element={<Index />}/>
        <Route path="/one" element={<One />}/>
        <Route path="/two" element={<Two />}/>
        <Route path="/three" element={<Three />}/>
      </Routes>
    </BrowserRouter>
  );
}

function Index(){
  return <h1>hello world0</h1>
}

function One(){
  return <h1>hello world1</h1>
}

function Two(){
  return <h1>hello world2</h1>
}

function Three(){
  return <h1>hello world3</h1>
}

export default App;

위 코드에서 우리는 세 가지 컴포넌트를 불러옵니다.

BrowserRouter 컴포넌트 : UI와 URL을 연결합니다. 마치 SSR과 같이 URL을 사용할 수 있게합니다.
Route 컴포넌트 : 현재 URL과 매칭된 UI를 렌더링 하는 역할을 합니다.
Routes 컴포넌트 : URL이 변경되면 <Routes> 는 모든 자식 <Route> 를 살펴보고 가장 알맞는 것을 매칭합니다.

<aside> 💡 <BrowserRouter vs HashRouter>

둘 모두 리엑트가 URL주소에 따라 구성 요소를 매칭하여 렌더링 하기 위한 방법들로 아래와 같은 차이를 볼 수 있습니다.

BrowserRouter는 페이지를 라우팅할 때 실제로 해당 URL에 html 파일이 존재하는것은 아니지만 URL을 통해 마치 서버의 폴더를 이동하는것 처럼 보여줍니다. www.myApp.com/pages/home/index.html

이는 SPA임에도 불구하고 마치 SSR처럼 보여지기 때문에 검색엔진에서 로봇으로 웹사이트를 탐색할 때 크롤링이 가능합니다.

또한 JS의 History API (https://developer.mozilla.org/en-US/docs/Web/API/History_API)를 사용하기 때문에 BrowserRouter 는 IE 9이하는 지원하지 않습니다.

HashRouter 는 URL주소에 #값을 넣어 표시합니다. 주소상의 #은 fragment identifier 라 불리며 컨텐츠 안에서의 특정한 위치를 나타냅니다. (대표적으로 내부링크를 예로 들 수 있습니다.) 이는 서버의 폴더구조를 이동하는것 과는 전혀 다른 모습이기 때문에 로봇을 통한 크롤링이 불가능해지고 결국 SEO에 악영향을 미칩니다.

하지만 HashRouter는 레거시 브라우저에서도 작동이 가능합니다.

</aside>

2.1 Component props 전달하기

One 컴포넌트에 props를 전달해봅시다.

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

function App() {
  return (
    <BrowserRouter>
      {/* 라우트를 감싸줍니다. */}
      <Routes>
        <Route path="/" element={<Index />}/>
        <Route path="/one" element={<One name='licat' />}/>
        <Route path="/two" element={<Two />}/>
        <Route path="/three" element={<Three />}/>
      </Routes>
    </BrowserRouter>
  );
}

function Index(){
  return <h1>hello world0</h1>
}

function One({name}){
  return <h1>{name} world1</h1>
}

function Two(){
  return <h1>hello world2</h1>
}

function Three(){
  return <h1>hello world3</h1>
}

export default App;