Adding a Router

첫 번째로 해야 할 일은 Browser Router를 만들고 첫 번째 route를 설정하는 것이다.

이는 우리의 앱을 client side routing로 만들어 준다.

main.jsx 파일이 바로 entry point이다.

파일을 열어서 다음을 작성하자.

// 📄src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

이 첫 번째 route를 "root route"라고 부른다.

나머지 route들이 이 route 안에 render 될 것이기 때문이다.

이 route는 UI의 root layout으로 동작할 것이다.

출처 : 리액트 라우터 공식 홈페이지➡️