Routes

라우터란?

라우팅을 구현하는 도구

URL과 컴포넌트 간의 매핑을 관리하고, URL 변경에 따라 컴포넌트를 렌더링 시키는 역할을 한다.

React Router

React에서 라우팅을 구현하는데 사용되는 라이브러리

Install

npm i react-router-dom

Browser Router

브라우저에 내장된 히스토리를 탐색 및 제어하기 위해 내부적으로 History API를 사용하여 CSR 라우팅을 구현

• URL과 매핑되는 페이지 컴포넌트를 렌더링

• history 객체를 사용해서 뒤로가기, 앞으로가기, 새로고침등의 동작을 처리

declare function BrowserRouter(
  props: BrowserRouterProps
): React.ReactElement;

interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  window?: Window;
}

테스트 환경에서는 window 객체에 접근할 수 없기 때문에, BrowserRouter를 사용하는 경우 테스트가 실패할 수 있다. 따라서 페이지 외부(main.js 등)에서 라우팅 처리를 해야 한다.

// main.js
root.render(
    <StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </StrictMode>,
  );
};

Memory Router

Test 환경에서 BrowserRouter 대신 MemoryRouter를 사용하여 라우팅 환경 구축한다.

말 그대로 메모리 내에서 라우팅

declare function MemoryRouter(
  props: MemoryRouterProps
): React.ReactElement;

interface MemoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
}

• initialEntries → 초기 엔트리 목록 설정, 즉 테스트할 페이지의 첫 렌더링 경로 설정

  • 배열인 이유는 브라우저 히스토리 스택과 동일, (뒤록가기, 앞으로가기 테스트를 하기 위함)

• initialIndex → 초기 엔트리 목록[배열] 중 인덱스를 통해 경로를 선택

import { MemoryRouter } from 'react-router-dom';

describe('App', () => {
  it('render correctly', () => {
    render(
      <MemoryRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/dashboard" element={<DashBoard />} />
        </Routes>
      </MemoryRouter>,
    );

    expect(screen.getByText(/이다잉/)).toBeInTheDocument();
  });
});

함수로 추출해서 재사용성을 높혀보자

export function withRouter(routes, initialEntries = '/') {
  return (
    <MemoryRouter initialEntries={[initialEntries]}>
      <Routes>
        {routes}
      </Routes>
    </MemoryRouter>
  )
}

describe('App', () => {
  it('render correctly', () => {
    render(withRouter(
    <>
      <Route path="/" element={<App />} />
      <Route path="/dashboard" element={<DashBoard />} />
    </>
    ));

    expect(screen.getByText(/이다잉/)).toBeInTheDocument();
  });
});

Routes

여러 경로의 라우팅 규칙을 처리하는 컨테이너

자식으로 여러 <Route /> 컴포넌트를 갖는다.

interface RoutesProps {
  children?: React.ReactNode;
  location?: Partial<Location> | string;
}

<Routes location>
  <Route />
</Routes>;

• children → 자식으로 <Route/> 컴포넌트만 받을 수 있다.

• location → 현재 위치를 명시적으로 제공, 생략시 현재 브라우저 URL 기준으로 처리

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/dashboard" element={<DashboardPage />} />
  <Route path="*" element={<NotFound />} />
</Routes>

• location이 변경될 때마다 하위 자식들의 경로를 확인하여 가장 일치하는 경로를 찾아 해당 분기를 렌더링한다

• 매칭되는 라우팅 규칙이 없을 때 특정 컴포넌트를 렌더링 할 수 있다. (catch-all 라우팅)

• 중첩하여 라우팅 규칙을 설정할 수 있다.

Route

경로와 매칭되는 컴포넌트를 선언적으로 지정

interface RouteObject {
  path?: string;
  index?: boolean;
  children?: React.ReactNode;
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  errorElement?: React.ReactNode | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
  lazy?: LazyRouteFunction<RouteObject>;
}

• path → 컴포넌트와 연결할 경로 지정, :로 시작하는 경로를 Dynamic Segments라 한다.

• index → 인덱스 경로 여부 지정

• caseSensitive → 경로의 대소문자를 일치시킬지 여부 (default false)

• element / Component → 경로와 연결할 컴포넌트를 지정한다.

Dynamic Segmenets란?

동적 경로의 매개변수(params)를 나타내는 라우트 경로의 일부, : 기호를 사용하여 매개변수를 표현한다.

<Route
  path="/teams/:teamId"
  element={<Team />}
/>;

// Team
export default function TeamPage() {
const params = useParams();
  // path: /teams/hotspur 인경우 params.teamId => hospur
  // path: /teams/real 인경우 params.teamId => real
  return <p>{`params: ${params.teamId}`}</p>
}

Index Route란?

index 경로이기 때문에 path를 설정하지 않아도 된다.

부모 경로가 일치하지만 자식 경로중 일치하는 것이 없을 때에 렌더링되는 기본 자식 경로이다.

Outlet

라우터에 매칭된 하위의 다른 라우트 컴포넌트가 위치할 영역을 지정 (Slot 개념)

일반적으로 레이아웃 컴포넌트에 활용된다.

export default function Layout() {

  return (
    <>
      <header>Header</header>
      <main>
        <Outlet />
      </main>
      <footer>Footer</footer>
    </>
  );
};

Layout Route

라우트 매칭에 참여하지 않는 껍데기용 라우트

<Routes>
  <Route element={<PageLayout />}> // Layout
    <Route path="/privacy" element={<Privacy />} />
    <Route path="/tos" element={<Tos />} />
  </Route>
  <Route path="contact-us" element={<Contact />} />
</Routes>

// '/privacy' 경로에서 렌더링된 결과물
<PageLayout>
  <Privacy />
</PageLayout>

LayoutRoute Component는 반드시 하위 경로 요소를 렌더링할 <Outlet> 을 추가 해주어야 한다.

Children을 사용하면 예상대로 동작하지 않을 수 있다.