[리액트] - Router활용

리액트에서 각 페이지를 나누는 기능을 구현할때 사용하는 라이브러리인 router-dom을 배워보겠습니다. 기존 방식(html, css, js)이라면 html 파일 여러개를 제작하여 이용하지만
리액트에서는 html파일을 하나만 사용합니다.

router 설치 방식

VSC 터미널을 이용하여 라이브러리를 설치합니다
명령어는 아래와 같습니다.

yarn add react-router-dom

or

npm install react-router-dom

Router 라이브러를 사용하기 위한 셋팅

설치한 리액트앱에서 index.js로 들어간 후

(...)
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
); 

import {BrowserRouter} from "react-router-dom"을 이용하여 임포트 시킨 후

<APP/>를 <BrowserRouter> 태그로 감싸 셋팅을 완료합니다

라우터로 페이지 나누기

import { Routes, Route, Link } from 'react-router-dom'

우선 리액트앱 -> App.js에서 라이브러리 사용을 위한 import를 우선 해줍니다

Route path="/u" element={ <div>메인페이지<div> } /

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>