Question

28

'Routes' is not defined react/jsx-no-undef

rated 0 times [ 30] [ 2] / answers: 1 / hits: 13823 / 2 Years ago, wed, december 1, 2021, 12:00:00

So I was following the React Crash Course on YouTube for Beginners from Academind. I was following everything along and everything was good until I came to the Routing part.
I followed every step, everything just perfectly (for the routing part) but after refreshing the page the following error occurs:

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

Aaand I did it, I wrapped my Route in Routes :

    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>

      <Routes>

        <Route path='/'>

          <AllMeetupsPage />

        </Route>



        <Route path='/new-meets'>

          <NewMeetupsPage />

        </Route>



        <Route path='/favs'>

          <FavoritesPage />

        </Route>

      </Routes>

    </div>

  );

}



export default App;

and then I get this:

'Routes' is not defined react/jsx-no-undef

then I :

Tried to import Routes from react-router-dom - No success;

Tried to import Routes from react-router - No success;

Tried to import Routes also in different components - No success;

Trust me I tried every different scenario for Routes but couldnt achieve anything different.
I

Googled, researched and couldnt find the solution for this problem.. Now Im desperate and
stuck here and I cant continue my React learning journey if I dont fix this...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dustin

Add To Favorites

Follow

Total Points: 599

Total Questions: 105

Total Answers: 106

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

dustin questions

1 event in Javascript is deprecated and I cannot use preventDefault()

Sun, Apr 18, 21, 00:00, 3 Years ago

1 playwright - issues with login form, inputs and submit click

Wed, Apr 14, 21, 00:00, 3 Years ago

1 How to mock fs.readFileSync with jest

Sun, Sep 20, 20, 00:00, 4 Years ago

1 How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 How do you toggle the checked value of a radio button in react using hooks?

Tue, Mar 10, 20, 00:00, 4 Years ago

View All

answered 3 Years ago jadap · Accepted Answer

Well the thing was, that I was following a guide for the older react-router-dom;

In order to fix that, I just read the new docs for react-router-dom@6;

There is no <Switch> now, instead you wrap your APP in just like this:

ReactDOM.render(

  <Router>

    <App />

  </Router>,

  document.getElementById("root")

);

Then in the App component, you wrap your content in <Routes> and for every different path we use <Route> </Route> or just <Route />, depends on your project.

Theres my example, just to be more clear:

function App() {

  return (

    <div>

    <MainNavigation/>

      <Routes>

        <Route path="/" element={<AllMeetups />}></Route>

        <Route path="/new-meetups" element={<NewMeetups />}></Route>

        <Route path="/favorites" element={<Favorites />}></Route>

      </Routes>

    </div>

  );

}