[react] react router v6.4 (createBrowserRouter ,outlet)

리액트 라우터 6.4버전 이상에서 사용가능한 createBrowserRouter ,outlet 정리 입니다.

BrowserRouter를 비롯한 리액트 라우터 사용법은 리액트 라우터 이전글

RouterProvider

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>
);

최상단 파일인 index.tsx에서 RouterProvider를 불러줍니다.
RouterProvider 는 router 라는 필수속성을 가지고 있고,
뒤에 나올 createBrowswerRouter 에서 만든 것을 넣어주면 됩니다.

createBrowserRouter

Router.tsx

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


export const router = createBrowserRouter([

    {
        path: "/",
        element: <Roots />,
        children: [
            {
                path: '',
                element: <Home />
            },
            {
                path: 'about',
                element: <About />
            }
        ]

    }
])

Roots.tsx는 기존 App.tsx 파일을 직관적인 파일명으로 수정하였습니다.

router 라는 변수를 만들어 createBrowserRouter() 안에 children 속성으로 배열에 중첩된 라우터(Nested Router)를 추가할 수 있다.

outlet

Roots.tsx

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

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

export default Roots;

outlet은 createBrowserRouter 에서 연결해준 하위 컴포넌트들을 출력해준다. 위 코드에서 outlet 작성을 안하면 header만 등장한다.

개인적으로 browerRouter 만 사용해봐서 createBrowserRouter는 아직 낯선데 리액트 라우터 공식 사이트에 따르면

createReactRouter는 모든 React Router 웹 프로젝트에 권장되는 라우터라고 한다

우리 자주 보자.. 🥹