[React] 리액트 라우터 - 기본 셋팅(Route, Link)

리액트는 html 파일을 index.html 하나만 사용함

 

리액트에서 페이지 나누는 법

 

1. 컴포넌트 만들어서 상세페이지 내용 채움

2. /detail 으로 접속하면 그 컴포넌트 보여줌

 

react-router-dom 라이브러리 사용

 

라우터 기본 셋팅

 

1️⃣ 터미널에서 react-router-dom 버전6 설치

 

2️⃣ index.js 가서 <App/> 태그 <BrowserRouter>로 감싸고 import BrowserRouter 하기

💡 내가 만든 js 파일들은 경로가 ./ 로 시작, 경로가 없는 것들은 대부분 라이브러리

 

 

3️⃣ App.js로 가서 Routes, Route, Link -> import 하고 

 

<Routes> 안에 <Route> 입력

Route의 path는 페이지 경로, element는 경로로 들어갔을때 보여주는 내용

 

 

 

 

페이지 이동버튼 만들기

 

<Link>로 이동버튼 만들음 ( <a> 태그와 같음)