[React] 라우트를 정의하는 다른 방법들

createBrowserRouter

최신 버전의 react-router-dom 사용방법

import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/products', element: <ProductsPage /> },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

createRoutesFromElements

이전 버전의 react-router-dom을 사용해본 사람에게는 좀 더 익숙한 방법이다.

import {
	createRoutesFromElements,
	RouterProvider,
  	Route,
} from 'react-router-dom';

const routeDefinitions = createRoutesFromElements(
  <Route>
    <Route path="/" element={<HomePage />} />
    <Route path="/products" element={<ProductsPage />} />
  </Route>
);

const router = createBrowserRouter(routeDefinitions);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

두 방법 중 무엇을 사용해도 상관없으나
예제에서는 createBrowserRouter를 사용함

참고

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript