React Router는 React 애플리케이션에서 브라우저의 URL 경로를 관리하고 컴포넌트와 매핑할 수 있는 라이브러리이다. 이를 통해 사용자가 브라우저의 URL 경로를 변경할 때마다 애플리케이션은 적절한 컴포넌트를 렌더링한다.

1. 기본 사용법

React Router 설치하기

$ npm install react-router-dom
또는
$ yarn add react-router-dom

기본 사용 방법

항상 BrowserRouter로 감싸줘야한다.
index라고 지정해줄 경우 처음 진입할 페이지를 명시한다.

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

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

URL 경로 매개변수

URL 경로에 매개변수를 사용하여 동적인 경로를 처리할 수 있다. 이는 :변수명 형식으로 작성하며, 매개변수는 match.params 객체를 통해 접근할 수 있다.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" index element={Home} />
        <Route path="/about" element={About} />
        // /:id 를 통해 동적인 경로로 접근 가능
        <Route path="/posts/:id" element={Post} />
        <Route path="/contact" element={Contact} />
        <Route element={NotFound} />
      </Routes>
    </BrowserRouter>
  );
}

2. Router Hooks

react-router-dom 에서는 useHistory, useLocation, useParams, useRouteMatch 등 다양한 훅을 제공한다.

useHistory

useHistory를 사용하면 페이지를 이동하거나 뒤로가기, 앞으로 가기와 같은 작업을 수행할 수 있다.

import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  function handleClick() {
    history.push('/about');
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

useLocation

useLocation은 현재 페이지의 경로, 검색 쿼리, 상태 등을 확인할 수 있다.

import { useLocation } from 'react-router-dom';

function About() {
  const location = useLocation();

  return (
    <div>
      <h1>About</h1>
      <p>Current pathname: {location.pathname}</p>
    </div>
  );
}

useParams

useParams은 URL 경로 매개변수 값을 추출할 때 사용한다.

import { useParams } from 'react-router-dom';

function Post() {
  const { id } = useParams();

  return (
    <div>
      <h1>Post {id}</h1>
    </div>
  );
}

useRouteMatch

useRouteMatch는 현재 경로와 일치하는 URL 경로를 찾을 때 사용한다.

import { useRouteMatch } from 'react-router-dom';

function Users() {
  const match = useRouteMatch('/users/:id');

  if (match) { // id값이 동일한지 확인
    return <p>User ID: {match.params.id}</p>;
  } else {
    return <p>No user found</p>;
  }
}

3. NavLink

React Router에서는 <Link> 컴포넌트와 함께 <a> 태그 대신 사용할 수 있는 <NavLink> 컴포넌트를 제공한다.

<NavLink>는 <Link>와 달리 현재 경로와 일치하는 경우 스타일링이 가능하며, 활성된 경로를 쉽게 표시할 수 있도록 만들 수 있다.

import { NavLink } from 'react-router-dom';

function Nav() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">
        Home
      </NavLink>
      <NavLink to="/about" activeClassName="active">
        About
      </NavLink>
      <NavLink to="/contact" activeClassName="active">
        Contact
      </NavLink>
    </nav>
  );
}

export default Nav

NavLink의 props

• to: 이동할 경로를 지정한다.
• activeClassName: 현재 경로와 일치하는 경우 적용할 클래스 이름을 지정한다.
• activeStyle: 현재 경로와 일치하는 경우 적용할 스타일 객체를 지정한다.
• exact: 경로가 완전히 일치해야 링크가 활성화되도록 설정한다.
• strict: 경로 끝에 슬래시(/)가 있는 경우 일치시킨다.
• isActive: 링크 활성화 여부를 반환한다.
• location: isActive 함수에서 사용할 위치 객체를 지정한다.
• NavLink는 <a> 태그 대신 사용하기 때문에 to를 사용해야 한다.