React Router — SPA 라우팅 구현

npm install react-router-dom

// src/App.tsx
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import HomePage from "./pages/HomePage";
import UserListPage from "./pages/UserListPage";
import UserDetailPage from "./pages/UserDetailPage";
import NotFoundPage from "./pages/NotFoundPage";
import Layout from "./components/Layout";

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<HomePage />} />
                    <Route path="users" element={<UserListPage />} />
                    <Route path="users/:id" element={<UserDetailPage />} />
                    <Route path="*" element={<NotFoundPage />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

// src/components/Layout.tsx
import { Outlet, NavLink } from "react-router-dom";

function Layout() {
    return (
        <div>
            <nav>
                {/* NavLink: 활성 경로에 active 클래스 자동 추가 */}
                <NavLink to="/" end>홈</NavLink>
                <NavLink to="/users">사용자</NavLink>
            </nav>

            <main>
                {/* 자식 라우트가 여기에 렌더링 */}
                <Outlet />
            </main>
        </div>
    );
}

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

function UserDetailPage() {
    const { id } = useParams<{ id: string }>();
    const { data: user, loading } = useFetch<User>(`/api/users/${id}`);

    if (loading) return <Spinner />;
    return <div>{user?.name}</div>;
}

import { useSearchParams } from "react-router-dom";

function UserListPage() {
    const [searchParams, setSearchParams] = useSearchParams();

    const page = Number(searchParams.get("page") ?? "1");
    const query = searchParams.get("q") ?? "";

    function handleSearch(newQuery: string) {
        setSearchParams({ q: newQuery, page: "1" });
    }

    function goToPage(newPage: number) {
        setSearchParams({ q: query, page: String(newPage) });
    }

    return (
        <div>
            <input value={query} onChange={e => handleSearch(e.target.value)} />
            {/* URL: /users?q=철수&page=2 */}
        </div>
    );
}

import { useNavigate } from "react-router-dom";

function LoginForm() {
    const navigate = useNavigate();
    const { login } = useAuth();

    async function handleSubmit(e: FormEvent) {
        e.preventDefault();
        await login(email, password);
        navigate("/dashboard");           // 이동
        // navigate(-1);                  // 뒤로 가기
        // navigate("/login", { replace: true });  // 히스토리 교체
    }
}

function ProtectedRoute({ children }: { children: ReactNode }) {
    const { user } = useAuth();
    const location = useLocation();

    if (!user) {
        // 로그인 후 원래 가려던 곳으로 돌아오게 state 전달
        return <Navigate to="/login" state={{ from: location }} replace />;
    }

    return <>{children}</>;
}

// App.tsx에서
<Route path="dashboard" element={
    <ProtectedRoute>
        <DashboardPage />
    </ProtectedRoute>
} />

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

// Link: 단순 이동
<Link to="/about">소개</Link>

// NavLink: 현재 경로와 일치 여부 스타일 적용
<NavLink
    to="/users"
    className={({ isActive }) => isActive ? "active" : ""}
>
    사용자
</NavLink>