React Router는 React SPA에서 클라이언트 측 라우팅, 뷰 전환 및 중첩 레이아웃을 제공하는 표준 라이브러리입니다.
기본 라우팅 구성 (React Router v6+)
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
링크 및 내비게이션 (Link vs NavLink)
import { Link, NavLink } from 'react-router-dom';
// Standard declarative navigation link
<Link to="/about">About Us</Link>
// NavLink with active styling
<NavLink
to="/dashboard"
className={({ isActive }) => (isActive ? 'active-link' : 'normal-link')}
>
Dashboard
</NavLink>
NavLink는 현재 활성 경로와 일치하는지 자동으로 감지하여 활성 스타일 클래스를 적용합니다:
동적 URL 파라미터 및 프로그래밍 방식 이동
useParams로 파라미터 추출
// Route definition: <Route path="/users/:userId" element={<UserProfile />} />
import { useParams } from 'react-router-dom';
export function UserProfile() {
const { userId } = useParams();
return <h2>Viewing Profile: {userId}</h2>;
}
useNavigate로 프로그래밍 방식 페이지 이동
import { useNavigate } from 'react-router-dom';
export function LoginForm() {
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
await loginUser();
// Programmatic redirect after successful login
navigate('/dashboard', { replace: true });
};
return <form onSubmit={handleSubmit}>...</form>;
}
중첩 라우팅 및 Outlet
<Outlet /> 컴포넌트는 일치하는 자식 라우트 컴포넌트가 렌더링되는 위치를 지정합니다:
import { Routes, Route, Outlet } from 'react-router-dom';
function Layout() {
return (
<div className="app-container">
<nav>Sidebar Navigation</nav>
<main>
{/* Child route matches render here */}
<Outlet />
</main>
</div>
);
}
// Router structure:
<Routes>
<Route path="/admin" element={<Layout />}>
<Route index element={<AdminDashboard />} />
<Route path="settings" element={<AdminSettings />} />
</Route>
</Routes>