[React Router] BrowerRouter vs createBrowerRouter

 

react-router-dom을 통해 사용할 수 있는 것으로 routing하는 데에 도움을 주는 라이브러리

 

여기서 routing이란?

웹 애플리케이션에서 사용자가 요청한 URL에 따라 해당 경로에 알맞는 컴포넌트를 렌더링하는 것!

 

그렇다면 왜 리액트 라우터를 쓰나요?

화면 전환 시 전체를 리렌더링 하는 방식이 아닌 컴포넌트별로 리렌더링 하는 방식으로 작동시킬 수 있음.

즉, 리액트로 생성된 SPA에서 화면 새로고침 없이 어떤 페이지로 이동할 수 있음.

 

SPA(Single Page Application)

 필요한 영역만 캐치하여 즉각적인 화면의 변화를 줄 수 있음.

 

 

1. BrowserRouter

  return<BrowserRouter>
    <Header/>
    <Routes>
        <Route path = "/" element = {<Home/>}></Route>
        <Route path = "/about" element = {<About/>}></Route>
    </Routes>
    </BrowserRouter>

 

 

2. createBrowserRouter

Router를 array형식으로 선언할 수 있음.

 

index.tsx에는 다음과 같이 선언해주고

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

 

아래와 같이 router를 만들어서 전달하는 것임.

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

export default router;

 

이제 "/"는 전체 route들의 컨테이너가 되는 것임.

 

아래와 같은 Root가 있다면 URL을 "/"의 자식들로 보기 때문에 

/home으로 이동한다면 Home에 해당하는 element는 Outlet자리에 렌더링된다.

 

Root에 포함된 <Header/>는 Root의 자식 어디로 가든 렌더링되게 된다.

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

 

Home이 렌더링 된 경우 , About이 렌더링 된 경우

    errorElement : <NotFound/>

이는 해당하는 경로가 존재하지 않거나 해당 element에서 에러가 발생하는 경우에

다음과 같이 사용자 지정 에러 페이지를 띄울 수 있도록 해준다.