React 기초) 페이지를 나누고 싶을 땐 react-router-dom 라이브러리 사용하자

 

0. 인프런 사이트로 보는 라우터

- 인프런이 리액트 기술을 사용하는지는 모르겠지만, 라우터 개념을 설명하기 위해 참조했다.

- 메인페이지를 들어가니 url : https://www.inflearn.com/ 이 이렇게 나왔다.

- 강의 페이지로 들어가니 url : https://www.inflearn.com/courses 이 이 이렇게 나왔다.

 

1. 리액트 라우터

- 위 예시와 같이 /를 통해서 페이지를 나누고 싶을때 라우터를 사용한다. 

(url 경로마다 다른 페이지를 보여주고 싶을 때 사용한다)

- 리액트의 외부 라이브러리인 react-router-dom 을 설치하자 

 

2. 리액트 라우터 셋팅 과정

1) 터미널 창에 npm install react-router-dom@6  입력

2) index.js 파일로 가서 아래 캡처본과 같이 설정한다.

BrowserRouter만 추가하면 된다.

 

3) App.js 파일로 이동

 

-상단에  Routes,Route 컴포넌트를 를 react-router-dom 에서 import 해온다.

- <Route>를 만들고 <Routes>로 감싼다.

<Route path="/url경로" element={<보여줄html>} /> 

 

- main 페이지와 main페이지 안에 detail페이지로 구성했다. 

import {Routes,Route} from 'react-router-dom' 
function App(){
  return (
    <div>
      <Routes>  
        <Route path="/main" element={<h1>main 페이지</h1>}/>
        <Route path="/main/detail" element={<h1>detail 페이지</h1>}/>
      </Routes> 
    </div>
  )
}


export default App;

- 참고로 코드샌드박스 리액트를 통해 실습하고 있어서 / 앞의 url은 실습환경과 다를 수 있다.