React Router – BrowserRouter 및 createBrowserRouter

BrowserRouter는 HTML5 History API를 사용하여 브라우저의 URL을 React 애플리케이션의 UI와 동기화하는 React Router에서 제공하는 라우터 중 하나입니다.

구성 요소를 사용하여 라우팅을 구성하고 구성 요소 내에서 라우팅 관련 구성 요소를 생성 및 사용합니다.

createBrowserRouter는 React Router v5 이후에 추가된 기능 라우터입니다.

클래식 BrowserRouter 와 달리 함수를 사용하여 라우터를 만들고 다른 라이브러리와의 통합이 더 쉽습니다.

또한 코드 분할에 대한 더 나은 지원을 제공합니다.

---

브라우저 라우터

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

브라우저 라우터 만들기

const router = createBrowserRouter((
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: (
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ),
  },
));

---

브라우저 라우터의 특징

– HTML5 History API를 사용하여 브라우저의 URL을 React 애플리케이션의 UI와 동기화합니다.

– 라우팅을 사용하기 때문에 구성 요소를 구성할 수 있으므로 사용이 간편합니다.

createBrowserRouter의 기능

– 함수를 사용하여 라우터 생성

---

주관적인 생각

1. createBrowserRouter는 BrowserRouter보다 더 복잡한 구성이 필요하므로 BrowserRouter는 초기 구성을 더 간단하게 수행할 수 있습니다.

2. BrowserRouter의 단점은 사용자의 브라우저가 HTML5 History API를 지원하지 않는 경우 라우팅이 제대로 되지 않을 수 있습니다.


(근데 대부분의 최신 브라우저가 HTML5 History API를 지원하기 때문에 이 문제가 크게 거론되지는 않을 것 같습니다.

)

3. 구성이 간단하고 브라우저 호환성 문제가 없는 경우 BrowserRouter가 더 적합할 수 있습니다.

4. createBrowserRouter의 경우 설정이 번거로울 수 있지만 객체 유형에 따라 코드가 작성되기 때문에 유지보수 및 협업에 좋을 것 같습니다.