[에러] 빈 화면이 뜨고 console창에 A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

 

문제점 : react는 실행되나 빈 화면이 출력된다. 

console창에 아래 문장이 뜬다.

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

문제 코드 :

function App() {

  return (

      <HashRouter>

        <Route path="/" component={Home} />

        <Route path="/about" component={About} />

       

      </HashRouter>

 

  );

해결방법

아래 코드로 수정한다.

import { HashRouter, Routes,Route } from "react-router-dom";

function App() {

  return (

      <HashRouter>

        <Routes>

          <Route path="/" component={Home} />

          <Route path="/about" component={About} />

        </Routes>

      </HashRouter>

  );

}

export default App;

 

<Routes> 태그 안에 <Route>태그를 넣어야 한다.
- react가 업그레이드 되면서 수정된 내용이다.