감정 일기장 프로젝트 _라우팅 설정

< 프로젝트 기본 과정 >

1. 리액트 폴더 생성

2. 라우팅 설정

3. 자주 사용하는 함수 구현

4. UI 설정

5. 공통 컴포넌트 구현

6. 페이지 별 기능 구현

7. 최적화

8. 배포

---

 

1. 터미널에서 react-router-dom을 설치한다. 

npm install react-router-dom

 

2. App.js에서 <BrowserRouter>를 function App()안에 넣어준다.

import { BrowserRouter } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
    </BrowserRouter>
  );
}

export default App;

 

3. pages 폴더 생성 후 각 페이지를 생성해준다.

 

4. App.js에 라우팅을 설정한다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Edit from "./pages/Edit";
import Notfound from "./pages/Notfound";

function App() {
  return (
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/new" element={<New />} />
            <Route path="/diary" element={<Diary />} />
            <Route path="/edit/:id" element={<Edit />} />
            <Route path="*" element={<Notfound />} />
          </Routes>
        </BrowserRouter>
  );
}

export default App;

 

---

이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.