가짓수가 많은 라우팅 해결하기

문제

• Main 페이지(/main) 하나에서 Sales 모드가 되는 /main/sales와 Factory 모드가 되는 /main/factory 2가지 모드가 있음
• 왼쪽 사이드 바의 '메인'을 눌러 /main 페이지로 들어가면 처음에는 기본적으로 Sales 모드(/main/sales)가 됨
• 이후 화면의 왼쪽 상단 셀렉터에서 'Sales'와 'Factory' 중 'Factory'를 선택하면 /main/factory 페이지로 이동
• 그러나 이때 다시 /main/sales 페이지로 이동, 새로고침, Main이 아닌 다른 페이지로 이동 후 다시 돌아왔을 때의 라우팅이 잘 되지 않음

해결

react-router-dom V6의 중첩 라우팅을 사용했다.

라우터 파일 (Router.tsx)

• 상위 Main 페이지 설정
• 내부 중첩 경로에 Sales와 Factory 설정
  • 중요: 앞에 '/'가 없는 sales, factory (/main을 기점으로 한 상대 경로 설정)

<Route path="/main" element={<Main />}>
	<Route path="sales" element={<Sales />} />
    <Route path="factory" element={<Factory />} />
</Route>

Main 컴포넌트 파일 (/Main/index.tsx)

• URL pathname을 useLocation으로 가져와서
• useEffect를 활용하여 /main/factory 경로가 아니면 무조건 /main/sales 경로로 이동하도록 처리
  • /main/factory 경로로 이동할 때는 왼쪽 상단 셀렉터에서 'Factory'를 선택했을 때 뿐임
  • Main 페이지의 초기 모드는 언제나 Sales이기 때문에 다른 페이지로 갔다가 Main 페이지에 다시 오거나 Main 페이지 내에서 새로고침을 했을 때 무조건 Sales 모드가 되어야 함)
• 마지막으로 설정된 경로에 맞는 Main 페이지 모드를 보여줄 수 있도록 children 개념인 <Outlet />을 반환하여 Main 컴포넌트 마무리

import { useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";

const FACTORY_ROUTE = "/main/factory";
const SALES_ROUTE = "/main/sales";

const Main = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  useEffect(() => {
    if (pathname !== FACTORY_ROUTE) {
      navigate(SALES_ROUTE, { replace: true });
    }
  }, [pathname]);

  return <Outlet />;
};

export default Main;

결과

위의 경로 문제가 모두 수정되었다.

• 처음에 /main을 들어가면 /main/sales로 바로 이동하고,
• Sales 컴포넌트(/main/sales)에서 셀렉터를 통해 Factory 모드로 이동하면 /main/factory 경로로 이동,
• 새로고침을 하거나 다른 페이지로 이동한 후 다시 돌아왔을 때는 Sales 모드인 Main 페이지를 잘 보여주었다.