[React] React Router 설정하기(react-router-dom)

Jaeyeon Kim·2023년 7월 1일
1

React

목록 보기
9/9
post-custom-banner

패키지 설치하기

yarn add react-router-dom

라우팅 설정하기

/* App.tsx */

import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import StartPage from "@pages/StartPage";
import SearchPage from "@pages/SearchPage";
import ResultPage from "@pages/ResultPage";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<StartPage />}></Route>
          <Route path="/search" element={<SearchPage />}></Route>
          <Route path="/result" element={<ResultPage />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

path에는 원하는 경로를, element에는 띄우고자 하는 페이지를 넣어준다.

profile
낭만과 열정으로 뭉친 개발자 🔥
post-custom-banner

0개의 댓글