TypeScript로 React Router 사용 시 에러 발생

1. 배경

1.1. 개발 환경

vite	React	TypeScript	React-router-dom

1.2. 문제 상황

React Router를 이용해 페이지 라우팅 구현 중 main.tsx에서 에러 발생

1.3. 에러내용(main.tsx에서 발생)

Type '{ children: Element; router: Router; }' 
is not assignable to type 'IntrinsicAttributes & RouterProviderProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & RouterProviderProps'.

1.4. 관련 코드

• src/main.tsx(에러 발생)

import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { RouterProvider } from "react-router-dom";
import { router } from "./router/Router.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router}> { /* 에러 발생 위치 */}
    <App />
  </RouterProvider>
);

• src/router/Router.tsx

import { createBrowserRouter } from "react-router-dom";
import LoginPage from "../pages/LoginPage";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <LoginPage />,
  },
]);

2. 원인

React Router 공식 홈페이지 및 stackoverflow를 통해 RouterProvider 컴포넌트는 자식 요소를 사용하지 않는 것을 확인함.

3. 해결

• main.tsx에서 App 컴포넌트 제거

import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router/Router.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router} />
);