React) createBrowserRouter 기본 사용 방법 ... react-router-dom

(Router.tsx 파일을 따로 분리해서 진행 / App.tsx -> Root.tsx)

---

1) Router.tsx

 

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./screens/Home";
import About from "./screens/About";
import Root from "./Root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ],
  },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}

createBrowserRouter를 정의. 이전의 V5 에서는 BrowserRouter를 사용했는데, 방식이 아예 바뀌었다.

 

기본 경로는 "/" 이며, Root 컴포넌트로 연결된다.

 

Router에는 RouterProvider 컴포넌트가 포함되어 있다. props는 위에 선언한 router.

 

 

---

2) index.tsx

 

import React from "react";
import ReactDOM from "react-dom/client";
import Router from "./Router";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
);

 

Router를 받아서 선언하면 끝

 

---

3) Root.tsx

 

import { Outlet } from "react-router-dom";
import Header from "./Header";

function Root() {
  return (
    <>
      <Header />
      <h1>
        <Outlet />
      </h1>
    </>
  );
}

export default Root;

 

* Header 와 Home, About 컴포넌트는 꾸미기 나름이기 때문에(중요한 문법이 없기 때문에) 생략

 

 

Outlet 을 이용하여 Root 의 children으로 선언한 컴포넌트들로 연결할 수 있다. 

... Root 컴포넌트의 하위 컴포넌트들과 연결시켜준다.

 

이 방식의 장점은, UI를 자유롭게 배치할 수 있다는 점이다.

---

 

참고)

 

- https://reactrouter.com/en/main/routers/create-browser-router

- https://nomadcoders.co/react-masterclass/lectures/4049