[React] 리액트 오류 Matched leaf route at location does not have an element. 해결 방법

 

오랜만에 리액트로 프로그래밍을 하던 중 오류가 발생했습니다. 오류가 발생한 코드는 아래와 같습니다.

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import MainPage from './pages/MainPage.js';

const App = () => {
  return (
    <Routes>
      <Route component={MainPage} path="/main" />
    </Routes>
  );
};

export default App;

 

오류문구

화면에 아무런 내용이 표시가 되지 않아 개발자 도구를 확인해보니 아래와 같은 경고 문구가 있습니다.

Matched leaf route at location "/main" does not have an element. This means it will render an  with a null value by default resulting in an "empty" page.</outlet >

 

해결방법

React Router v6가 정식 릴리즈 되면서 Route에 children이나 component가 사라졌고, 대신 element를 사용해야 합니다.

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import MainPage from './pages/MainPage';

const App = () => {
  return (
    <Routes>
      <Route element={<MainPage />} path="/main" />
    </Routes>
  );
};

export default App;