intro

react 프로젝트에 필요한 필수 router hook에 대해 알아 본다.

useRoutes

...
<Routes>
	<Route path="/" element={<Home />} />
  	...
</Routes>
...

App.tsx Routes 경로 설정부분을 useRoutes를 이용한 Routes.tsx파일로 분리 해준다.

mkdir ./src/config && touch ./src/config/Routes.tsx

@/config/Routes.tsx

import React from "react";
import { useRoutes } from "react-router-dom";

import Category2 from "@/pages/Category2";
import Category3 from "@/pages/Category3";
import Dashboard from "@/pages/Dashboard";
import NotFound from "@/pages/NotFound";
import Category4 from "@/pages/Category4";
import Category4Page1 from "@/pages/Category4/Category4Page1";
import Category4Page2 from "@/pages/Category4/Category4Page2";
import Category4Page3 from "@/pages/Category4/Category4Page3";

const Routes = () => {
  const element = useRoutes([
    { path: "/", element: <Dashboard /> },
    { path: "/category2", element: <Category2 /> },
    { path: "/category3", element: <Category3 /> },
    {
      path: "/category4",
      element: <Category4 />,
      children: [
        { path: "/category4/page1", element: <Category4Page1 /> },
        { path: "/category4/page2", element: <Category4Page2 /> },
        { path: "/category4/:slug", element: <Category4Page3 /> }
      ]
    },
    { path: "*", element: <NotFound /> }
  ]);
  return element;
};

export default Routes;

@/App.tsx

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";

import Routes from "@/config/Routes";

import GNB from "@/components/Navigations/GNB";

function App() {
  return (
    <div className="p-6">
      <Router>
        <GNB />
        <Routes />
      </Router>
    </div>
  );
}

export default App;