[Error]A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

에러 코드

import React from 'react';
import { Route } from 'react-router-dom';
import About from './About';
import Home from './Home';
 
const App = () => {
  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;

옳바르게 코드를 입력한것 같지만 아무것도 렌더링 되지 않았으며 에러가 발생했다..

A is only ever to be used as the child of element, never rendered directly. Please wrap your in a <Routes>.

에러 원인

이 에러 메세지는 리액트 라우터(React Router)의 사용 방법에 문제가 있는 경우 발생 할 수 있다. 해석해보면 <Route> 컴포넌트를 <Routes> 컴포넌트의 자식으로 사용해야 한다는 경고다.

에러 해결

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import About from './About';
import Home from './Home';
 
const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </div>
  );
};

export default App;

코드를 수정한후 결과를 보면 에러는 없지만 아직 렌더링된 컴포넌트들이 눈에 보이지 않는다.

찾아보니 이유는
react-router-dom의 버전 6에서는 컴포넌트의 component prop을 사용하는 대신 element prop을 사용해야 합니다. 버전 6에서는 element prop을 통해 렌더링할 컴포넌트를 지정해야 합니다. 라고 한다.

코드를 최종 수정해보면

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

const App = () => {
return (
  <div>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About/>} />
    </Routes>
  </div>
);
};

export default App;

정상적으로 렌더링 된다.