react-router와 react-router-dom의 차이점

김내현·2025년 2월 20일

React

개인공부

목록 보기

49/51

주로 패키지의 역할과 사용 대상에 있습니다.

1. react-router

코어 패키지로, 리액트에서 라우팅 기능을 제공하는 핵심 라이브러리입니다.
브라우저, 네이티브, 서버 등 다양한 환경에서 사용할 수 있도록 설계되었습니다.
react-router-dom과 react-router-native 같은 환경별 패키지들이 이 라이브러리를 기반으로 동작합니다.
자체적으로 브라우저에서 사용할 수 있는 컴포넌트(BrowserRouter, Link 등)를 제공하지 않습니다.

2. `react-router-dom`

웹 애플리케이션에서 사용하기 위한 브라우저 전용 패키지입니다.
react-router를 기반으로 브라우저 환경에서 필요한 기능을 추가한 것입니다.
브라우저에서 동작하는 BrowserRouter, HashRouter, Link, NavLink, useParams, useNavigate 같은 기능들을 제공합니다.

정리

패키지	역할	주요 컴포넌트
`react-router`	라우팅의 핵심 기능을 제공하는 코어 패키지	`<Routes>`, `<Route>`
`react-router-dom`	브라우저 환경에서 라우팅을 가능하게 해주는 패키지	`<BrowserRouter>`, `<HashRouter>`, `<Link>`, `<NavLink>`

예제 코드

아래는 react-router-dom을 사용하는 기본적인 예제입니다.

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

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

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

export default App;