Matched leaf route at location does not have an element or Component. 오류해결방법

 

---

오래전에 사놓은 Router강의를 듣다가 오류가 나서 작성해본다.
패스트캠퍼스는 강의구매자들을 위해 업로드를 해야한다.흠흠!

 

 

오류코드

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
      <Route path="/" component={Home} />
      <Route path="/profile" component={Profile} />
      <Route path="/about" component={About} />
      </Routes> 
    </Router>
  );
}

export default App;

 

리액트 강의 듣다가 발견한 오류

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

 

해결방법

React Router Dom v6로 인하여 변경 사항이 생겼다.

• component 방식 변경 (`component={COM}` 및 `render={() => <h1>Hello<h1/>}` 삭제)
• element{ <COM />}으로 사용

 

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="/about" element={<About />} />
      </Routes> 
    </Router>
  );
}

export default App;

 

느낀점

처음엔 강의가 오래 되어서 실망했다가 오류에 대한 데이터를 하나둘 씩 쌓을 수 있어서 좋은 기회였다.