React Router : createBrowserRouter

최혜린·2024년 10월 9일

createBrowserRouter

createBrowserRouter는 React Router v6.4 이상에서 사용되는 함수로, 동적 라우팅을 설정하고, 데이터 로디으 에러 핸들링 등을 구성할 수 있다.

createBrowserRouter 장점

중앙 집중식 라우팅 설정 : 라우트 설정을 한 곳에서 관리할 수 있어 코드가 더 깔끔하고 유지보수가 용이하다.
비동기 데이터 로딩 : 라우트를 정의할 때, 각 라우트에 대한 데이터 로딩 함수를 쉽게 설정할 수 있어 페이지가 로드될 때 필요한 데이터를 미리 가져올 수 있다.
라우트 구성 : 중첩된 라우트를 쉽게 정의할 수 있어 복잡한 UI 구조를 간단하게 관리할 수 있다.
코드 분할 : 라우트를 통해 코드 분할을 쉽게 구현할 수 있어 초기 로딩 성능을 개선할 수 있다.

이전 라우터 방식

create Browser Router 방식

createBrowserRouter 사용방법

React Router 설치
다음 명령어를 사용하여 리액트 라우터 패키지를 설치한다.

npm install react-router-dom

createBrowserRouter 를 사용하여 라우터를 정의한다.
createBrowserRouter는 라우터를 생성하는 함수이다. 배열 형태로 경로와 요소를 정의한다.

라우트 속성
- path : URL 경로
- element : 해당 경로에 렌더링할 컴포넌트
- children : 중첩 라우트를 정의할 때 사용
- index : 기본 경로에 대한 라우트를 정의할 때 사용한다.

코드예제

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

const Intro = () => (      
<nav>
  <Link to="/">Intro</Link>
  <Link to="/home">Home</Link>
  <Link to="/page1">Page1</Link>
  <Link to="/page2">Page2</Link>
  <Link to="/page3">Page3</Link>
  <h1>인트로 페이지</h1>
  <Outlet />
</nav>);
const Home = () => <h2>이곳은 HOME</h2>;
const Page1 = () => <h3>Page1 입니다</h3>;
const Page2 = () => <h3>Page2 입니다</h3>;
const Page3 = () => <h3>Page3 입니다</h3>;
const NotFound = () => <h1>404 Not Found</h1>;

const router = createBrowserRouter([
  { path: '/', element: <Intro />, 
    children :[
      {index:true, element:<h2>이곳은 인트로입니다</h2>},
      { path: '/home', element: <Home /> },
      { path: '/page1', element: <Page1 /> },
      { path: '/page2', element: <Page2 /> },
      { path: '/page3', element: <Page3 /> },
    ]},
    { path: '*', element: <NotFound /> }
 
]);

function App() {

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

export default App;