[React/리액트] 리액트 라우터 React Router 설치하고 시작하기

 

 

라우팅?

웹사이트의 주소(URL)에 따라 다른 페이지나 컴포넌트를 보여주는 것을 말한다.

 

예를 들어, www.example.com/about 주소로 이동하면 'About' 페이지가 보여지고,

www.example.com/contact로 이동하면 'Contact' 페이지가 보여진다.

 

 

 

React Router 설치

React 자체에는 이런 라우팅 기능이 없으므로, 별도의 라이브러리인 React Router를 사용한다.

npm install react-router-dom

 

 

 

App 컴포넌트

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

 

BrowserRouter

웹 애플리케이션에 HTML5의 History API를 사용하여 새로고침 없이 UI를 업데이트하고 현재 URL을 동기화해주는 라우터 환경을 제공한다. (as Router 부분은 BrowserRouter를 Router라는 별칭으로 사용하겠다는 의미)

 

Routes

여러 개의 Route 컴포넌트를 포함할 수 있는 컨테이너 역할을 한다. 어떤 경로(path)가 주어졌을 때 그에 해당하는 컴포넌트(element)를 렌더링해준다. (React Router v6에서 Switch 대신 Routes 컴포넌트를 사용한다.)

 

Route

특정 경로(path)에 대한 설정을 정의한다. 어떤 경로가 주어지면 그에 해당하는 React 컴포넌트(element)를 렌더링한다.

반응형

예를들어,

 <Route path='/' element={<Home />} />  :  URL 경로가 '/'일 때 'Home' 컴포넌트를 보여줘!

 

 

 

 

 

다양한 경로 설정

<Routes>
  <Route path='/' element={<Home />} />
  <Route path='/post' element={<NewPost />} />
  <Route path='/post/:id' element={<PostPage />}
  <Route path='/about' element={<About />} />
  <Route path='*' element={<Missing />} />
</Routes>

 

각각의 경로(Route)에 대해서 처리할 컴포넌트(element)를 지정한다.

 

'/': Home 컴포넌트가 렌더링

'/post': NewPost 컴포넌트가 렌더링

'/post/:id': PostPage 컴포넌트가 렌더링.

( :id는 URL 파라미터를 나타내며, 이는 동적으로 변할 수 있다. ex.  /post/1, /post/2 ..)

'/about': About 컴포넌트가 렌더링

' * ': 위에서 정의된 어떤 경로와도 일치하지 않을 때 Missing 컴포넌트가 렌더링