createBrowserRouter vs BrowserRouter

This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack.

It also enables the v6.4 data APIs like loaders, actions, fetchers and more.

react-router의 공식 문서에 따르면 createBrowserRouter 사용을 권장한다.

모듈화와 사용자 정의가 가능하다는 부분에서 기존에 자주 사용하던 BrowserRouter보다 이점을 갖는 것 같다.

사용하기 위해서는 세 곳을 만져줘야 한다.

1. Router.tsx
2. App.tsx
3. index.tsx

Router.tsx

import { createBrowserRouter } from 'react-router-dom';
import App from './App';
import Home from './pages/Home';
import SignUp from './pages/SignUp';
import SignIn from './pages/SignIn';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: 'signup',
        element: <SignUp />,
      },
      {
        path: 'signin',
        element: <SignIn />,
      },
    ],
  },
]);

export default router;

createBrowserRouter를 통해 router를 정의하고 export해준다.

App.tsx

import reset from 'styled-reset';
import { createGlobalStyle } from 'styled-components';
import { Outlet } from 'react-router-dom';
import Header from './components/Header';

const GlobalStyle = createGlobalStyle`
  ${reset}

  body{
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    color: #0D0907;
  }

  a{
    text-decoration: none;
    color: #0D0907;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <Header />
      <Outlet />
    </>
  );
}

export default App;

<Router />의 element들을 렌더링시킬 위치에 <Outlet />을 배치한다.

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './Router';

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

RouterProvider로 감싸주고 router를 인자로 넣어준다.

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