React Router 동작 원리 — SPA에서 URL이 바뀌는 진짜 방법

// History API — 서버 요청 없이 URL 변경
window.history.pushState(state, '', '/about');
// URL이 /about으로 변경되지만, 서버에 요청이 가지 않음

// 뒤로가기/앞으로가기 시 이벤트 발생
window.addEventListener('popstate', (event) => {
  console.log('URL이 변경됨:', window.location.pathname);
  // React Router가 이 이벤트를 감지하여 적절한 컴포넌트를 렌더링
});

1. 사용자가 <Link to="/about">을 클릭
2. React Router가 history.pushState('/about') 호출
3. URL이 /about으로 변경 (서버 요청 없음)
4. Router가 URL 변경을 감지
5. /about에 매칭되는 컴포넌트를 렌더링

// BrowserRouter — 깔끔한 URL
// URL: https://example.com/about
// 필요: 서버에서 모든 경로를 index.html로 리다이렉트 설정
<BrowserRouter>
  <Routes>
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

// HashRouter — 해시 기반 URL
// URL: https://example.com/#/about
// 장점: 서버 설정 불필요 (해시는 서버로 전송되지 않음)
<HashRouter>
  <Routes>
    <Route path="/about" element={<About />} />
  </Routes>
</HashRouter>

사용자가 직접 https://example.com/about을 입력하면
→ 서버가 /about에 대한 파일을 찾음
→ 파일이 없으므로 404
→ 해결: 모든 경로를 index.html로 리다이렉트

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/products">상품</Link>
        <Link to="/about">소개</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

<Routes>
  <Route path="/users/:userId" element={<UserProfile />} />
</Routes>

function UserProfile() {
  const { userId } = useParams();
  return <div>사용자 ID: {userId}</div>;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="products" element={<Products />}>
          <Route index element={<ProductList />} />
          <Route path=":productId" element={<ProductDetail />} />
        </Route>
        <Route path="settings" element={<Settings />}>
          <Route path="profile" element={<Profile />} />
          <Route path="account" element={<Account />} />
        </Route>
      </Route>
    </Routes>
  );
}

function Layout() {
  return (
    <div>
      <Header />
      <main>
        <Outlet /> {/* 여기에 자식 라우트가 렌더링됨 */}
      </main>
      <Footer />
    </div>
  );
}

function Products() {
  return (
    <div>
      <h1>상품</h1>
      <Outlet /> {/* ProductList 또는 ProductDetail이 렌더링됨 */}
    </div>
  );
}

/                    → Layout > Home
/products            → Layout > Products > ProductList
/products/123        → Layout > Products > ProductDetail
/settings/profile    → Layout > Settings > Profile

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

// 기본 링크
<Link to="/products">상품</Link>

// 활성 상태 스타일링
<NavLink
  to="/products"
  className={({ isActive }) => isActive ? 'nav-active' : ''}
>
  상품
</NavLink>

// 프로그래매틱 네비게이션
function SearchForm() {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    navigate(`/search?q=${query}`);
    // 또는 뒤로가기: navigate(-1)
    // replace: navigate('/login', { replace: true })
  };
}

import { createBrowserRouter, RouterProvider, useLoaderData } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/products/:productId',
    element: <ProductDetail />,
    loader: async ({ params }) => {
      const response = await fetch(`/api/products/${params.productId}`);
      if (!response.ok) throw new Response('Not Found', { status: 404 });
      return response.json();
    },
    errorElement: <ErrorPage />,
  },
]);

function ProductDetail() {
  const product = useLoaderData(); // loader의 반환값

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

function App() {
  return <RouterProvider router={router} />;
}

const router = createBrowserRouter([
  {
    path: '/products/:productId/review',
    element: <ReviewForm />,
    action: async ({ request, params }) => {
      const formData = await request.formData();
      await postReview(params.productId, {
        rating: formData.get('rating'),
        comment: formData.get('comment'),
      });
      return redirect(`/products/${params.productId}`);
    },
  },
]);

function ReviewForm() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

  return (
    <Form method="post">
      <input name="rating" type="number" min="1" max="5" />
      <textarea name="comment" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '저장 중...' : '리뷰 작성'}
      </button>
    </Form>
  );
}

import { lazy, Suspense } from 'react';

const ProductPage = lazy(() => import('./pages/ProductPage'));
const SettingsPage = lazy(() => import('./pages/SettingsPage'));

<Routes>
  <Route
    path="/products"
    element={
      <Suspense fallback={<PageSkeleton />}>
        <ProductPage />
      </Suspense>
    }
  />
  <Route
    path="/settings"
    element={
      <Suspense fallback={<PageSkeleton />}>
        <SettingsPage />
      </Suspense>
    }
  />
</Routes>