React react-router-dom 이란?

react-router-dom 이란?

• react는 SPA(Single Page Application)이다.
• react에 router를 사용할 수 있는 즉, 화면 전환을 지원하는 모듈이다.

react-router-dom 설치하기

npm i react-router-dom

파일 구성 예시 이미지

사용방법

• 기본적으로 BrowserRouter 컴포넌트 안에 Routes 컴포넌트를 사용한다.
• ㅡRoutes 컴포넌트 안에는 Link 컴포넌트와 Route 컴포넌트를 사용한다.
• BrowserRouter는 한번만 사용할 수 있다. 두번을 사용할 시에는 오류가 뜨는데 콘솔에서는 no issue라 나오지만 브라우저 콘솔상에서는 두번 사용한다고 뜨고 화면이 나오지 않는다.
• 그러므로 App.tsx 나 index.tsx 둘 중 하나에 적용하면 된다.

<예시 코드>

import {HashRouter, Route} from "react-router-dom";
<HashRouter>
	<Route path="/" component={Home} />
	<Route path="/about" component={About} />
</HashRouter>