1. RouterProvider이란?

• React Router v6.4에서 도입된 라우팅 방식으로, BrowserRouter를 대체할 수 있는 방식이다.
• createBrowserRouter()로 라우터 객체를 만들고, 이를 RouterProvider에 넘겨주는 방식으로 사용한다.
• 라우트 객체 방식을 사용하기 때문에 라우팅 경로, 컴포넌트, 자식 라우터 등을 객체 형식으로 비교적 간단하게 관리할 수 있다.
• 데이터 로딩, 에러 핸들링, 동적 라우팅 설정 등의 기능을 제공한다.
  
  

2. 사용 방법

2-1. 사용 예시

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
	라우트 설정
]);

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

2-2. router 함수란?

• createBrowserRouter()가 반환하는 라우터 객체이다.
• createBrowserRouter()의 첫 번째 인자로 객체를 가지는 배열로 라우팅 정보를 전달하며, 라우터의 라우트 경로는 배열 내의 객체로 저장된다.
• 주요 인자
  • path: 경로 정보를 담는 인자.
    • 예시: "/profiles"
  • element: 해당 경로에서 열릴 컴포넌트.
    • 예시: "/profiles"경로 -> 컴포넌트
  • children: 하위 라우트 설정을 위한 배열로, path, element, children 등으로 구성된 객체(즉, 하위 라우터)가 들어간다.
    • 예시: "/profiles/studentId" -> path가 ":studentId"인 동적 파라미터.