중첩 라우터

이번 프로젝트에서 “/workspace/:product”와 “/workspace/:product/:project” 이런 url을 사용하고자 했다. 이를 위해선 중첩 라우터를 이용하는 방법과 workspace 컴포넌트를 만들고 각 페이지마다 workspace를 부모 태그로 주는 방식 2가지가 있다.

 

우리는 “/workspace”라는 공통적인 url을 사용하기 때문에 중첩 라우터를 사용하는 것이 더 적절하다고 판단하여 중첩 라우터로 구현하였다.

App.tsx

<Route path={'/workspace'} element={<Workspace />}>
  <Route path={':product'} element={<Product />} />
  <Route path={':product/:project'} element={<Project />} />
</Route>

우선 이렇게하여 ”/workspace”에서 url이 뻗어나가도록 했다.

Workspace.tsx

import React from 'react';
import { Outlet } from 'react-router-dom';

export default function Workspace() {
  return (
    <section className={'border-solid border w-h-full flex'}>
      <nav className={'border-solid border w-[18.6rem] h-full'}>사이드 바</nav>
      <article className={'border-solid border w-noneSideBar h-full'}>
        {/* 중첩 라우터 */}
        <Outlet />
      </article>
    </section>
  );
}

Workspace.tsx는 Outlet을 이용하여 중첩 라우터를 구현했다.

Product.tsx & Project.tsx

-Product.tsx

import React from 'react';
import { useParams } from 'react-router-dom';

export default function Product() {
  const { product } = useParams();

  return <div>제품 페이지 {product}</div>;
}

 

-Project.tsx

import React from 'react';
import { useParams } from 'react-router-dom';

export default function Product() {
  const { product } = useParams();

  return <div>제품 페이지 {product}</div>;
}

Product.tsx와 Project.tsx는 위와 같이 구현하였다.