리쿠르탐_createBrowserRouter 적용

라우터를 정리하고 싶었다.
찾아보니 v6.4에 새로운 router가 추가됐다.
그래서 createBrowserRouter를 접목하고자 했다.

function App() {
  const location = useLocation();
  const isHome = location.pathname === "/";

  return (
    <Provider store={configStore}>
      <ThemeProvider theme={theme}>
        <Wrap>
          {isHome ? <HomeGnb logo="RECRUTAM" /> : null}
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/track" element={<Track />} />
            <Route path="/education" element={<Education />} />
            <Route path="/experience" element={<Experience />} />
            <Route path="/keyword" element={<Keyword />} />
            <Route path="/loading" element={<Loading />} />
            <Route path="/customizedCareer" element={<CustomizedCareer />} />
            <Route path="/chat" element={<Chat />} />
            <Route path="/bookmark" element={<BookMark />} />
          </Routes>
        </Wrap>
      </ThemeProvider>
    </Provider>
  );
}

export default App;

 

v6.4에는 다음과 같은 새로운 router가 추가되었다.

1. createBrowserRouter
   1. 동적 페이지에 적합
   2. 검색엔진 최적화
   3. github-pages 배포 어려움
2. createMemoryRouter
3. createHashRouter
   1. 정적 페이지에 적합
   2. 검색 엔진으로 읽지 못함
   3. github-pages 배포 쉬움
4. createStaticRouter

이러한 router는 v6.4에서 추가된 새롭게 추가된 data API를 제공한다.

data API에는 route.action, route.errorElement, route.lazy, route.loader 등이 있다

=> data Api를 사용하지 않는다면 이전 router인 BrowserRouter, HashRouter 그대로 사용

1. data API

1) route.action: 라우팅에서 특정 url이나 경로에 대한 처리를 정의하는 부분

- 특정 url로 이동시 수행되는 함수 or 컨트롤러 액션을 지정할 때

// 라우트 액션 예시 (JavaScript)
const routeAction = (params) => {
  // 특정 URL에 대한 동작 정의
  console.log('라우트 액션 실행', params);
  // 여기에 특정 작업 수행
};

 

2) route.errorElement: 라우팅 중에 에러가 발생했을 때 표시할 HTML엘리먼트 지정

// 에러 엘리먼트 예시 (React)
const ErrorComponent = () => {
  return (
    <div className="error-message">
      <p>오류가 발생했습니다. 다시 시도해주세요.</p>
    </div>
  );
};

// 라우트에서 사용하는 경우
const route = {
  // ...
  errorElement: <ErrorComponent />,
  // ...
};

 

3) route.lazy(지연로딩): 웹 페이지의 성능 향상을 위해 모듈이나 자원을 필요한 시점에만 로딩

// 지연 로딩 예시 (JavaScript - 동적 import 활용)
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

// 라우트에서 사용하는 경우
const route = {
  // ...
  lazy: true, // 라우트 지연 로딩 활성화
  // ...
  component: LazyLoadedComponent, // 실제 컴포넌트는 필요할 때 로드됨
  // ...
};

 

route.loader : 비동기적으로 데이터를 로딩하거나 처리할 때 사용되는 로딩 인디케이터 또는 로딩화면을 지정

// 로더 예시 (React)
const Loader = () => {
  return <div className="loader">로딩 중...</div>;
};

// 라우트에서 사용하는 경우
const route = {
  // ...
  loader: <Loader />, // 라우트에 로더 지정
  // ...
};

 

 

 

 

2. 내 코드에 createBrowserRouter 적용

import { createBrowserRouter } from "react-router-dom";
import HomeGnb from "src/component/HomeGnb";
import BookMark from "src/page/BookMark";
import Chat from "src/page/Chat";
import CustomizedCareer from "src/page/CustomizedCareer";
import Education from "src/page/Education";
import Experience from "src/page/Experience";
import Home from "src/page/Home";
import Keyword from "src/page/Keyword";
import Loading from "src/page/Loading";
import Login from "src/page/Login";
import Profile from "src/page/Profile";
import Track from "src/page/Track";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <>
        <HomeGnb logo="RECRUTAM" />
        <Home />
      </>
    ),
    children: [
      {
        path: "/login",
        element: <Login />,
      },
      {
        path: "/profile",
        element: <Profile />,
      },
      {
        path: "/track",
        element: <Track />,
      },
      {
        path: "/education",
        element: <Education />,
      },
      {
        path: "/experience",
        element: <Experience />,
      },
      {
        path: "/keyword",
        element: <Keyword />,
      },
      {
        path: "/loading",
        element: <Loading />,
      },
      {
        path: "/customizedCareer",
        element: <CustomizedCareer />,
      },
      {
        path: "/chat",
        element: <Chat />,
      },
      {
        path: "/bookmark",
        element: <BookMark />,
      },
    ],
  },
]);

export default router;

 

function App() {
  return (
    <Provider store={configStore}>
      <ThemeProvider theme={theme}>
        <Wrap>
          <RouterProvider router={router} />
        </Wrap>
      </ThemeProvider>
    </Provider>
  );
}

 

 

 

https://noah-dev.tistory.com/38

React Router v6.4 이상에서 Router 다루기(RouterProvider, createBrowserRouter, Route)