React Router Dom-v6

☑️ createBrowserRouter

모든 React Router 웹 프로젝트에 권장되는 라우터입니다.

• Router를 array형식으로 입력가능

사용법

Router.jsx

const router = createBrowserRouter([
  {
    path:"/", //상위 컴포넌트 경로
    element:<Root />,
    children : [ //하위 컴포넌트 경로
      {
        path : "",
        element : <Home />
      },
      {
		path : "about",
        element : <About />
      }
    ]
  }
])

index.jsx
RouterProvider는 router라고 불리우는 prop을 가진다.

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

Root.jsx

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

function Root(){
	return(
    	<div className="App">
        	<Header />
        	<Outlet />
        </div>
    )
}

export default Root;

Outlet 컴포넌트를 만들어 주어야 createBrowserRouter에서 설정한 children옵션에서 설정한 경로(path:"", path:"about")로 하위 컴포넌트들이 렌더링된다.

☑️ errorElement

설정한 컴포넌트에 에러가 발생할 경우와 잘못된 경로로 접속하여 에러가 발생할 경우 설정한 에러에 맞춰진 컴포넌트를 보여준다.

• 다른 멀쩡한 페이지가 에러의 영향을 받지 않게 해준다.

사용법

const router = createBrowserRouter([
    {
        path:"/",
        element : <Root />,
        children : [
            {
                path:"",
                element:<Home />,
                errorElement : <ErrorComponent /> 
              //Home 컴포넌트가 에러가 발생할 경우 <ErrorComponent />컴포넌트를 보여준다.
            },
            {
                path:'about',
                element:<About />,
            }
        ],
        errorElement : <NotFound /> 
      // 기본경로에서 자식에 해당하지 않는 잘못된 경로를 입력했을 때 <NotFound />컴포넌트를 보여준다.
    }
])