[React + TS] react-router 사용해 페이지 라우터 적용하기

1. 라이브러리 설치하기

npm install react-router-dom @types/react-router-dom

 

2. src > index.tsx 파일에 App 컴포넌트 BrouserRouter 컴포넌트로 감싸주기

BrouserRouter 컴포넌트는 웹앱에 HTML5의 History API를 사용해 페이지를 새로 불러오지 않고도 주소를 변경하고

현재 주소의 경로와 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해준다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

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

 

3. App.tsx에서 Routes, Route 컴포넌트 적용하기

전체를 <Routes>로 감싸고 하위 컴포넌트인 <Route>에 라우팅 경로 (path)와 적용할 컴포넌트 (element)를 속성으로 넣어준다.

import "./App.css";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import RecommendMenu from "./pages/RecommendMenu";
import FavoriteRecipe from "./pages/FavoriteRecipe";
import RecommendDiet from "./pages/RecommendDiet";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/recommend-menu" element={<RecommendMenu />} />
      <Route path="/recommend-diet" element={<RecommendDiet />} />
      <Route path="/favorite-recipe" element={<FavoriteRecipe />} />
    </Routes>
  );
}

export default App;