[React] react-router-dom 사용하기

리액트의 라운터

사용자가 주소를 입력하면 그것을 감지해서 화면에 올바른 페이지를 제공한다. 

 

BrowserRouter와 HashRouter가 존재한다. 

- BrowaerRouter : 우리가 흔히 알고있는 주소 체계이며, HTML5를 지원하는 브라우저의 주소를 감지

- HashRouter : 주소에 #이 붙어 있으며, 이 해시 주소를 감지한다. 

 

설치 

yarn add react-router-dom

가장 많이 사용하는 react-router-dom이다. 

 

사용하기 

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "@/components/layout/header";
import Home from "./home";
import Product from "./product";
import NotFound from "./notFound";

const Router = () => {
  return (
    <BrowserRouter>
      {/* Header */}
      <Routes>
        <Route path="/" element={<Header />}></Route>
      </Routes>

      {/* Contents */}
      <Routes>
        <Route path="/" element={<Home />}></Route>

        <Route path="/product/*" element={<Product />}></Route>

        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

BrowserRouter 태그로 안에 Routes 태그를 사용해서 설정한다. 

만약 Header와 Contents가 구분되야하는 경우 그 수만큼 Routes 태그를 만들어서 사용한다.