[React-Router] createBrowserRouter 세팅하기

개요

What is New in 6.4?
React Router V6.4부터 createBrowserRouter가 추가되었다.

Route 방식

BrouserRouter

BrouserRouter를 설명하는 공식문서.

• 최상단 컴포넌트를 BrowserRouter로 감싼다.

//main.tsx
import * as React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

const root = createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
  	<App />
  </BrowserRouter>
);

//App.tsx
import { Routes, Route } from "react-router-dom";

function App() {
  return (
      <Routes>
        <Route path="/" element={<MainPage />} />
    	<Route path="/mypage" element={<MyPage />} />
    	<Route path="/info">
          	<Route path="/main" element={<InfoMainPage />} />
    		<Route path="/detail" element={<InfoDetailPage />} />
		<Route />
        <Route path="*" element={<ErrorPage />} />
      </Routes>
  );
}

createBrowserRouter

createBrowserRouter를 설명하는 공식문서.

• RouterProvider를 통해 route를 정의해준다.

//main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

//App.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      {index: true, element: <MainPage /> },
      {path: '/mypage', element: <MyPage />},
      {
        path: '/info',
        children: [
          { index: true, element: <InfoMainPage /> },
          { path: 'detail', element: <InfoDetailPage /> },
        ],
      },
    ],
  }
])

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

export default App;