React Router v7에서 로케일 기반 라우팅을 구현하는 방법

로케일 세그먼트로 라우팅 구성하기

문제

다국어 애플리케이션을 구축할 때, 한 가지 근본적인 결정이 모든 것을 좌우합니다. 바로 애플리케이션이 어떤 언어를 표시할지 어떻게 알 수 있을까요? 명시적인 메커니즘이 없으면 /about와 같은 URL은 모호해집니다. 이는 어떤 언어의 콘텐츠든 나타낼 수 있기 때문입니다. 사용자는 특정 언어 버전에 대한 링크를 공유할 수 없고, 검색 엔진은 어떤 버전이 어떤 대상에 속하는지 이해하는 데 어려움을 겪습니다. 이러한 모호함은 사용자 경험과 검색 가능성 모두에 문제를 야기합니다.

해결 방법

/en/about 또는 /fr/about와 같이 언어 식별자를 URL 경로에 직접 포함시킵니다. 이렇게 하면 모든 경로가 특정 언어에 고유하게 되어 사용자와 검색 엔진 모두에게 모호함이 제거됩니다. 로케일 매개변수를 첫 번째 세그먼트로 사용하여 라우트를 정의하면, 애플리케이션은 URL에서 로케일을 추출하고 이를 사용하여 표시할 언어 콘텐츠를 결정할 수 있습니다. 이 접근 방식은 모든 URL이 페이지와 해당 언어를 명확하게 식별하도록 보장합니다.

단계

1. 로케일 매개변수로 라우트 정의하기

app/routes.ts에서 각 경로의 첫 번째 세그먼트로 로케일 매개변수를 포함하도록 라우트를 구성합니다.

import { type RouteConfig, route, index } from "@react-router/dev/routes";

export default [
  route(":locale", "./localized-layout.tsx", [
    index("./home.tsx"),
    route("about", "./about.tsx"),
    route("contact", "./contact.tsx"),
  ]),
] satisfies RouteConfig;

콜론 접두사는 locale를 동적 세그먼트로 만들어 URL에서 파싱되고 라우트 컴포넌트에 매개변수로 제공됩니다. 이 구성은 /en, /en/about, /fr/contact와 같은 라우트를 생성하며, 첫 번째 세그먼트는 항상 로케일입니다.

2. 로케일을 추출하는 레이아웃 컴포넌트 생성하기

자식 라우트는 부모 라우트의 Outlet 컴포넌트를 통해 렌더링됩니다. 로케일 매개변수를 추출하고 중첩된 라우트를 렌더링하는 레이아웃을 생성합니다.

import { Outlet, useParams } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <a href={`/${locale}`}>Home</a>
        <a href={`/${locale}/about`}>About</a>
        <a href={`/${locale}/contact`}>Contact</a>
      </nav>
      <Outlet />
    </div>
  );
}

useParams 훅은 URL에서 동적 세그먼트 값을 가져옵니다. 레이아웃은 이 로케일을 사용하여 내비게이션 링크를 구성하고 Outlet을 통해 하위 라우트에 렌더링 제어를 전달합니다.

3. 페이지 컴포넌트에서 로케일 접근하기

모든 라우트 컴포넌트에서 useParams 훅을 사용하여 로케일 파라미터에 접근할 수 있습니다.

import { useParams } from "react-router";

export default function About() {
  const { locale } = useParams();

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

로컬라이즈된 레이아웃 내에서 렌더링되는 모든 컴포넌트는 URL에서 로케일을 추출할 수 있습니다. 이 값은 적절한 번역을 로드하거나, 날짜와 숫자를 포맷하거나, 기타 로케일별 결정을 내리는 데 사용할 수 있습니다.

앵커 태그를 Link 컴포넌트로 교체하여 클라이언트 측 라우팅으로 내비게이션을 활성화합니다.

import { Outlet, useParams, Link } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <Link to={`/${locale}`}>Home</Link>
        <Link to={`/${locale}/about`}>About</Link>
        <Link to={`/${locale}/contact`}>Contact</Link>
      </nav>
      <Outlet />
    </div>
  );
}

Link 컴포넌트는 클라이언트 측에서 라우팅을 처리하고 웹 페이지 새로고침을 방지하여 페이지 간 원활한 내비게이션을 가능하게 합니다. 각 링크에는 내비게이션 전반에 걸쳐 언어 컨텍스트를 유지하기 위한 로케일 파라미터가 포함됩니다.