[리액트] react-router-dom

react-router

• 라우팅 기능의 핵심 라이브러리로, 다양한 환경(브라우저, 네이티브, 서버 등)에서 사용할 수 있는 공통적인 라우팅 로직을 제공
• 라우팅을 위한 기본적인 기능을 포함하지만, 브라우저 환경에 특화된 기능은 포함하지 않는다.
  ( 브라우저에서 사용하기 위해서는 react-router-dom설치가 반드시 필요하다)

---

react-router-dom

• react-router-dom은 브라우저 환경에서 사용할 수 있도록 react-router를 확장한 라이브러리
• 브라우저에서 라우팅을 구현하기 위한 DOM 관련 기능들을 제공한다..

설치 방법

npm install react-router-dom

react-router-dom을 사용하여 라우팅 설정하기

BrowserRouter, Route, Routes 등과 같은 컴포넌트를 사용하여 페이지 내비게이션을 관리할 수 있다.

---

React Router의 주요 개념

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

 

BrowserRouter:

• 가장 기본적인 라우팅 컨테이너  HTML5의 히스토리 API를 사용하여 URL을 관리
• 일반적으로 애플리케이션의 최상위 컴포넌트에서 BrowserRouter로 감싸준다.
• https://example.com/about 처럼 표시

HashRouter

- URL에 #을 추가하여 경로를 관리합니다.
- https://example.com/#/about 처럼 표시
- 서버 설정 없이 클라이언트 측 라우팅을 사용할 때 유용

 

Route:

• 특정 URL 경로에 매핑되는 컴포넌트를 정의.
• path 속성으로 경로를 설정하고, 해당 경로에 맞는 컴포넌트를 렌더링한다.

Routes:

• 여러 Route를 관리하는 컨테이너
• Routes 내에 여러 Route를 정의하여, 각 경로에 해당하는 컴포넌트를 보여준다.
• element 속성을 사용하여 컴포넌트를 JSX로 직접 전달

React Router v6부터는Switch가 Routes로 변경
Routes는Switch와 비슷한 역할을 하지만, 더 효율적이고 간결한 방식으로 작동한다.

 

Link:

• Link는 페이지 간 내비게이션을 위한 컴포넌트
• a 태그 대신 사용되며, 페이지를 새로 고침하지 않고 내비게이션을 할 수 있다.