• BrowserRouter

BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다. ReactDOM의 렌더 단계인 index.js에 넣어서 활용할 수도 있습니다. BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있습니다.

• Routes, Route

Routes 와 Route는 경로를 매칭해주는 역할을 하는 컴포넌트인데,

<Routes> 컴포넌트는 여러 <Route>를 감싸서 그 중경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다. <Route>를 사용하지 않으면 매칭되는 모든 요소를 렌더링 한다.

<Route> 컴포넌트는 path와 element 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.

• Link

경로를 연결해주는 역할을 하는 컴포넌트이다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML History API를 이용해 페이지의 주소만 변경해 준다. <a>와 다르게 <Link>는 페이지 전환을 방지하는 기능이 내장되어 있어 새로고침 현상 없이 SPA를 구현할 수 있다.

메커니즘을 간단히 하면 Link를 클릭하는 등의 페이지 전환 명령에 의해 Link 내의 to에 해당되는 path(Route에 있음)로 이동하여 해당 Route의 element에 해당하는 컴포넌트 페이지를 불러온다고 할 수 있다.

* BrowserRouter 사용 위치에 따라 다른 라우팅 방법

// index.js 파일에서 아래와 같이 BrowserRouter 없이 작성할 경우
ReactDOM.render(<App />, document.getElementBy('root'));

// App 컴포넌트에서 아래와 같이 작성하면 된다.
import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
	<Routes>
		<Route path="/" element={<Tweets/>}/>
	  <Route path="/about" element={<About/>}/>
	  <Route path="/mypage" element={<MyPage/>}/>
	</Routes>
</BrowserRouter>

// index.js 파일에서 아래와 같이 작성할 경우
import {BrowserRouter as Router} from 'react-router-dom';

ReactDOM.render(<Router><App /></Router>, document.querySelector('#root'));

// App 컴포넌트에서 아래와 같이 작성하면 된다.
import { Routes, Route } from "react-router-dom";

<Routes>
	<Route path="/" element={<Tweets/>}/>
  <Route path="/about" element={<About/>}/>
  <Route path="/mypage" element={<MyPage/>}/>
</Routes>