라우터 지정하기

[minjeongHEO]

✅ TODO

• [x] react-router-dom 을 사용하여 라우터 지정하기 (인덱스, 회원가입, 로그인)
• [x] 잘못된 경로의 라우터 지정하기

✏️ 기능 설명

React Router Tutorial

$ npm install react-router-dom

📦src ┣ 📂components ┃ ┣ 📜Header.jsx ┃ ┣ 📜Index.jsx ┃ ┣ 📜Join.jsx ┃ ┣ 📜Login.jsx ┃ ┣ 📜Main.jsx ┃ ┗ 📜NotFound.jsx ┣ 📂router ┃ ┣ 📜ProtectedRoute.jsx ┃ ┗ 📜routes.jsx ┣ 📜App.jsx ┗ 📜main.jsx

App.jsx에서 routes.jsx 컴포넌트로 분리하고 AppRoutes(routes.jsx)에서 라우팅 작업을 했습니다.

여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공합니다. 이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter입니다.

<BrowserRouter>, <Routes>, <Route>, <Link> 컴포넌트 사용하기

import { BrowserRouter as Router, Route, Routes, Link  } from 'react-router-dom';

• <Routes> 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 합니다.  

• <Route> path속성에 경로, element속성에는 컴포넌트를 넣어 줍니다.

• <Link>  - 웹 페이지에서는 원래 링크를 보여줄 때 a태그를 사용합니다.    하지만 a태그는 클릭 시 페이지를 새로 불러오기 때문에 사용하지 않는다.
    생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있습니다. <Link to="경로">링크명</Link>  

  사전에 정의하지 않은 경로로 접근하는 경우 NotFound 페이지로 이동 처리

  <Route path="*" element={<NotFound />} />

📕 참고할만한 자료(선택)

https://reactrouter.com/en/main/start/tutorial https://goddaehee.tistory.com/305 https://danminblog.tistory.com/69