라우팅 관련 리팩토링

페이지 및 기능

기타

상태

담당자

🛠️ Refactor

Description

현재 routes/index.tsx 는 사용되지 않고 있는 형태이기에 삭제 작업이 필요해요!

추가적으로 리팩토링 하거나 고려해볼 사항을 적어봤어요!

To-do

기존의 routes/index.tsx 제거

라우팅 관련 설정을 App.tsx 가 아니라, 다른 라우팅 파일을 만들어서 처리하는 것 고려해보기

react-router-dom v6 에 등장한 createBrowserRouter 를 사용하는 방법 고려해보기

추가내용

추가적으로, react-router-dom v6를 공부하면서 찾은 방법인데

라우팅 파일에서 회원 전용과 비회원 전용 페이지를 등록하면 페이지 컴포넌트에서 로그인 확인후 리다이렉션하는 로직을 작성하지 않게끔 작성할 수 있더라고요!

https://bbearcookie.netlify.app/authorization/


const defaultRoute: RouteObject[] = [
  {
    path: "/",
    element: <Main />,
  },
  {
    path: "/signup",
    element: <SignupForm />,
  },
  {
    path: "/signin",
    element: <SigninForm />,
  },
]

const authorizationRoute: RouteObject[] = [
  {
    path: "/",
    element: <Authorization />,
    children: [
      {
        path: "/onlyuser",
        element: <OnlyUser />,
      },
    ],
  },
]

const notAuthorizationRoute: RouteObject[] = [
  {
    path: "/",
    element: <NotAuthorization />,
    children: [
      {
        path: "/onlyguest",
        element: <OnlyGuest />,
      },
    ],
  },
]

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      ...defaultRoute,
      ...authorizationRoute,
      ...notAuthorizationRoute,
    ],
  },
])