다음과 같이 컴포넌트 구조를 작성한 뒤 개발에 들어갔다.
우리는 라우팅을 위해 react-router-dom
version 6를 이용한다.
import { Navigate, useRoutes } from "react-router-dom";
import MainLayout from "../Layout/main/index";
import Home from "../Pages/Home/Home";
import Introduction from "../Pages/Introduction/Introduction";
import QuickStart from "../Pages/Introduction/QuickStart";
import ImageFilterMain from "../Pages/TechDemos/ImageFilter/ImageFilterMain";
import WebCamFilterPage from "../Pages/TechDemos/WebCamFilter";
// 화면 라우팅 테이블
export default function Router() {
return useRoutes([
{
path: "/",
element: <MainLayout />,
children: [
{ element: <Navigate to="/" replace /> },
{ path: "", element: <Home /> }
],
},
{
path: "/Introduction",
element: <MainLayout />,
children: [
{ element: <Navigate to="/Introduction" replace /> },
{ path: '', element: <Introduction />},
{ path: "QuickStart", element: <QuickStart /> }
],
},
{
path: "/TechDemos",
element: <MainLayout />,
children: [
{ element: <Navigate to="/TechDemos" replace /> },
{ path: '', element: <ImageFilterMain />},
{ path: "ImageFilter", element: <ImageFilterMain /> },
{ path: "WebCamFilter", element: <WebCamFilterPage /> },
],
},
{ path: '*', element: <Navigate to="/404" replace /> }
]);
}
이때 children은 중첩 라우팅이다. 기존에는 Route 안에 Route를 선언하는 방식을 이용했지만 v6부터는 방식이 바뀌었다. 이때 부모루트 요소에서 자녀 루트 요소를 렌더링 하기 위해 <Outlet/>
을 이용해야 한다. 이를 이용해 라우팅을 하였다.
[참고] https://reactrouter.com/docs/en/v6/api#outlet