Should a be wrapped in a ?

Question

After my React code compiles, I'm getting an error that says the following:

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>.

Here is my code:

import { Route } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupsPage from "./pages/NewMeetups";
import FavoritesPage from "./pages/Favorites";

function App() {
 

  return (
    <div>
      <Route path="/">
        <AllMeetupsPage />
      </Route>
      <Route path="/new-meetups">
        <NewMeetupsPage />
      </Route>
      <Route path="/favorites">
        <FavoritesPage />
      </Route>
    </div>
  );
}

export default App;

What am I doing wrong?

¯\\_(ツ)_/¯ But, but, the error clearly states what you are doing wrong and answers your question. Which part of the message that you should wrap you Route with Routes is not clear? — Yury Tarabanko, Dec 02 '21 at 21:10
Does this answer your question? [Error: A is only ever to be used as the child of element](https://stackoverflow.com/questions/69832748/error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element) — isherwood, Dec 02 '21 at 21:10

Pedz · Answer 1 · 2022-02-08T02:33:09.563

I was also coming across the same issue and I think I was following the same tutorial as you here: https://www.youtube.com/watch?v=Dorf8i6lCuk

I read the documentation listed above at https://reactrouter.com/docs/en/v6/getting-started/overview and it looks like they have reworked some of the structure on this.

The following code worked well for me by wrapping the items in <Routes> (since we already have <BrowserRouter> in our index.js file and adding in the element tag.

import { Routes, Route } from "react-router-dom"; // Changed to add Routes and BrowserRouter - Same with index.js page
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupsPage from "./pages/NewMeetups";
import FavoritesPage from "./pages/Favorites";

function App() {     

  return (
    <div>
      <Routes>
        <Route path='/' element={<AllMeetupsPage />} />
        <Route path='/new-meetups' element={<NewMeetupsPage />} />
        <Route path='/favourites' element={<FavoritesPage />} />
      </Routes>
    </div>
  );
}

export default App;

score 1 · Answer 2 · answered Dec 03 '21 at 00:08

You'll need to also wrap the <Routes> component in a router, <BrowserRouter> is the router referenced in the installation guide.

React Router v6 installation guide:
https://reactrouter.com/docs/en/v6/getting-started/overview

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

function App() {
 

  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/">
            <AllMeetupsPage />
          </Route>
          <Route path="/new-meetups">
            <NewMeetupsPage />
          </Route>
          <Route path="/favorites">
            <FavoritesPage />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

score 0 · Answer 3 · answered Dec 02 '21 at 21:09

0

Simply follow the instructions in the error message and wrap your routes with <Routes>:

<Routes>
  <Route path="/">
    <AllMeetupsPage />
  </Route>
  <Route path="/new-meetups">
    <NewMeetupsPage />
  </Route>
  <Route path="/favorites">
    <FavoritesPage />
  </Route>
</Routes>

answered Dec 02 '21 at 21:09

LinuCC

410
5
9

Once I did that, I got this error: Error: [AllMeetupsPage] is not a component. All component children of must be a or – Chad Roussel Dec 02 '21 at 21:46

Should a be wrapped in a ?

3 Answers3