React Router

React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리입니다.
이를 통해 URL을 기반으로 화면을 렌더링하고, SPA(Single Page Application)에서 라우트 간 전환을 부드럽게 처리할 수 있습니다.

React Router는 라우팅을 설정하는 BrowserRouter 컴포넌트와 Route, Link 등의 컴포넌트를 활용합니다.

//main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./css/index.css";
import { BrowserRouter } from "react-router";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

//App.tsx
import React from "react";
import { Routes, Route } from "react-router-dom";

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

중첩 라우팅

부모 라우트는 자동으로 자식 라우트에 포함됩니다.
/dashboard /dashboard/settings 로 접근할 수 있습니다.

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Outlet을 사용하여 부모 라우트에서 자식 라우트를 렌더링할 수 있습니다.

import { Outlet } from "react-router";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

레이아웃 라우팅

공통 레이아웃을 가지는 라우트를 그룹화하여 관리합니다.
path를 작성하지 않으면 URL에 segment가 추가되지 않습니다.
/ /contact /projects /projects/123 /projects/123/edit

<Routes>
  <Route element={<MarketingLayout />}>
    <Route index element={<MarketingHome />} />
    <Route path="contact" element={<Contact />} />
  </Route>

  <Route path="projects">
    <Route index element={<ProjectsHome />} />
    <Route element={<ProjectsLayout />}>
      <Route path=":pid" element={<Project />} />
      <Route path=":pid/edit" element={<EditProject />} />
    </Route>
  </Route>
</Routes>

Index

부모의 기본 경로(path="/")에서 렌더링되는 기본 자식 라우트입니다. index 속성을 사용합니다.

<Routes>
  <Route path="/" element={<MainLayout />}>
    <Route index element={<Home />} /> {/* 기본 페이지 */}
    <Route path="about" element={<About />} />
  </Route>
</Routes>

Route Prefixes

element 속성을 작성하지 않으면 레이아웃을 추가하지 않고 segment를 추가합니다.

<Routes>
  <Route path="/dashboard" >
    <Route path="settings" element={<Settings />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>

Dynamic Segments

경로에 동적으로 변경 가능한 변수를 사용합니다.
/users/123

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

Splats

경로의 나머지 모든 부분을 지정합니다.

<Routes>
  <Route path="/files/*" element={<FileViewer />} />
</Routes>

Linking

Link와 NavLink를 사용하여 페이지 간 이동이 가능합니다.
NavLink는 현재 활성화 된 경로에 특정 클래스나 스타일을 추가할 수 있습니다.

<NavLink
  to="/"
  className={({ isActive }) =>
    isActive ? "active" : ""
  }
>
  Home
</NavLink>

<Link to="/concerts/salt-lake-city">Concerts</Link>