[React - 15] BrowserRouter / Routes / Route

React Router v4 이후의 버전에서 웹 어플리케이션의 라우팅을 지원하는 주요 컴포넌트입니다. 

BrowserRouter는 HTML5의 History API를 사용하여 UI를 동기화해주며, 

URL을 직접 조작하면서도 페이지 전체 리로드를 하지 않는 SPA (Single Page Application)를 구현할 수 있게 합니다.

 

이 예제는 React Router v6 기준 사용법입니다.

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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

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

function Users() {
  return <h2>Users</h2>;
}
export default App;

Routes

v6에서는 Routes 컴포넌트를 사용하여 여러 Route 컴포넌트를 감싸줍니다. 이는 경로 일치의 명시성을 높여줍니다.

Route

각 Route는 path와 element 두 개의 주요 속성을 가집니다.

element 속성에는 렌더링할 컴포넌트를 JSX 형태로 전달합니다.

Link

사용자가 클릭하여 다른 경로로 이동할 수 있는 링크를 생성합니다.

페이지 전체를 리로드하지 않고 클라이언트 사이드에서 라우팅을 수행합니다.