[React] Route, Routes 에러

Uncaught 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 { Route, Routes } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupPage from "./pages/NewMeetup";
import FavoritesPage from "./pages/Favorites";

function App() {
  // path(url) = local:3000(도메인)/경로(path)
  // my-page.com/path
  return (
    <div>
      <Route path="/">
        {/* 실제로 로딩될 컴포넌트 추가 */}
        <AllMeetupsPage />
        {/* 시작 페이지 */}
      </Route>
      <Route path="/new-meetup">
        {/* 경로가 new-meetup인 컴포넌트 */}
        <NewMeetupPage />
      </Route>
      <Route path="/favorites">
        {/* 경로가 favorites인 컴포넌트 */}
        <FavoritesPage />
      </Route>
    </div>
  );
}

export default App;

강의 내용을 듣던 도중, 에러가 발생했다...

에러를 보니 Route는 무조건 Routes의 자식요소여야만 하다....라고 한다.

 

 

 

import { Route, Routes } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupPage from "./pages/NewMeetup";
import FavoritesPage from "./pages/Favorites";

function App() {
  // path(url) = local:3000(도메인)/경로(path)
  // my-page.com/path
  return (
    <div>
      <Routes>
        <Route path="/">
          {/* 실제로 로딩될 컴포넌트 추가 */}
          <AllMeetupsPage />
          {/* 시작 페이지 */}
        </Route>
        <Route path="/new-meetup">
          {/* 경로가 new-meetup인 컴포넌트 */}
          <NewMeetupPage />
        </Route>
        <Route path="/favorites">
          {/* 경로가 favorites인 컴포넌트 */}
          <FavoritesPage />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

감싸보았으나 또 다른 에러가 발생했다.

 

 

 

Uncaught Error: [AllMeetupsPage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

 

에러를 살펴보니까! Routers의 자식 컴포넌트는 무조건 Route나 React.Fragment여야 한다...

까다로운 Routers ^^

 

element prop 값으로 각각의 컴포넌트들을 라우트 요소에 추가(? 지정??)해주었다.

import { Route, Routes } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupPage from "./pages/NewMeetup";
import FavoritesPage from "./pages/Favorites";

function App() {
  // path(url) = local:3000(도메인)/경로(path)
  // my-page.com/path
  return (
    <div>
      <Routes>
        <Route path="/" element={<AllMeetupsPage />} />
        {/* 실제로 로딩될 컴포넌트 추가 */}
        {/* 시작 페이지 */}
        <Route path="/new-meetup" element={<NewMeetupPage />} />
        {/* 경로가 new-meetup인 컴포넌트 */}
        <Route path="/favorites" element={<FavoritesPage />} />
        {/* 경로가 favorites인 컴포넌트 */}
      </Routes>
    </div>
  );
}

export default App;

 

 

 

원하는 결과가 출력되는 것을 확인했다.

 

 

 

 

※ 에러 발생 이유

Route 사용법이 달라졌다고 한다. 

참고 : https://stackoverflow.com/questions/69832748/error-error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element