intro

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

사전 소스

이전 글에서 작성한 소스에서 컴포넌트 분리를 해준다.

// App.jsx
import React from "react";
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";

import Home from "@/pages/Home";
import Category1 from "@/pages/Category1";
import Category2 from "@/pages/Category2";
import NotFound from "@/pages/NotFound";
import Navigation from "@/navigation";
import Page1 from "@/pages/Category1/Page1";// 분리
import Page2 from "@/pages/Category1/Page2";// 분리
import Page3 from "@/pages/Category2/Page3";// 분리

const App = () => {
  return (
    <div className="flex flex-row justify-center min-h-screen">
      <div className="w-[1080px]">
        <Router>
          <Navigation className="bg-blue-200 h-32 flex items-center" />
          <div className="bg-blue-50">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/category1" element={<Category1 />} />
              <Route path="/category1" element={<Category1 />}>
                <Route index element={<Page1 />} />
                <Route path="/category1/page2" element={<Page2 />} />
              </Route>
              <Route path="/category2" element={<Category2 />}>
                <Route path=":slug" element={<Page3 />} />
              </Route>
              <Route path="*" element={<NotFound />} />
            </Routes>
          </div>
        </Router>
      </div>
    </div>
  );
};

export default App;

useRoutes

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

위 Routes 경로 설정부분을 useRoutes를 이용하여 설정 한다.

...
- import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
+ import {BrowserRouter as Router, useRoutes} from "react-router-dom";
...

const Routes = () => {
  const element = useRoutes([
    {path: "/", element: <Home />},
    {
      path: "/category1",
      element: <Category1 />,
      children: [
        {path: "/category1/page1", element: <Page1 />},
        {path: "/category1/page2", element: <Page2 />}
      ]
    },
    {
      path: "/category2",
      element: <Category2 />,
      children: [
        {index: true, element: <Page3 />},
        {path: ":slug", element: <Page3 />}
      ]
    },
    {path: "*", element: <NotFound />}
  ]);
  return element;
};


const App = () => {
  return (
    <div className="flex flex-row justify-center min-h-screen">
      <div className="w-[1080px]">
        <Router>
          <Navigation className="bg-blue-200 h-32 flex items-center font-bold" />
          <div className="bg-blue-50">
            + <Routes />
          </div>
        </Router>
      </div>
    </div>
  );
};

export default App;

full source

// App.jsx
import React from "react";
import {BrowserRouter as Router} from "react-router-dom";
import Routes from "@/config/Routes";
import Navigation from "@/navigation";

const App = () => {
  return (
    <div className="flex flex-row justify-center min-h-screen">
      <div className="w-[1080px]">
        <Router>
          <Navigation className="bg-blue-200 h-32 flex items-center font-bold" />
          <div className="bg-blue-50">
            <Routes />
          </div>
        </Router>
      </div>
    </div>
  );
};

export default App;

Routes 관련 코드를 분리

// src/config/Routes.jsx
import React from "react";
import {useRoutes} from "react-router-dom";

import Home from "@/pages/Home";
import Category1 from "@/pages/Category1";
import Category2 from "@/pages/Category2";
import NotFound from "@/pages/NotFound";
import Page1 from "@/pages/Category1/Page1";
import Page2 from "@/pages/Category1/Page2";
import Page3 from "@/pages/Category2/Page3";

const Routes = () => {
  const element = useRoutes([
    {path: "/", element: <Home />},
    {
      path: "/category1",
      element: <Category1 />,
      children: [
        {path: "/category1/page1", element: <Page1 />},
        {path: "/category1/page2", element: <Page2 />}
      ]
    },
    {
      path: "/category2",
      element: <Category2 />,
      children: [
        {index: true, element: <Page3 />},
        {path: ":slug", element: <Page3 />}
      ]
    },
    {path: "*", element: <NotFound />}
  ]);
  return element;
};

export default Routes;

Route만 관리하는 Routes.jsx를 작성함

git

https://bitbucket.org/code7004/react-webpack/src/ab16f127b1dcc2294b7309b1387c3dc059d8a5a0/