CODEWITHSUNDEEP
javascripthtmlcssreactjs
daddy
daddy

Reputation: 71

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

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

Upvotes: 2

Views: 25546

Answers (9)

Gunn Soni
Gunn Soni

Reputation: 1

Use this , your code might not have imported necessary dependecies

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

Upvotes: 0

Zekarias Goitom
Zekarias Goitom

Reputation: 1

Try import { BrowserRouter, Routes, Route } from "react-router-dom"

  • make sure you wrote Routes and not Router or you'll get an error like You cannot render a <Router inside another <Router error ...

Upvotes: 0

HarshitChopra
HarshitChopra

Reputation: 41

The Routes component belongs to the react-router module which is taken as a dependency by the react-router-dom module, try the below code, as it imports the components separately.

import {BrowserRouter as Router} from "react-router-dom"
import { Route, Routes} from "react-router";

Upvotes: 0

Ghadir Farzaneh
Ghadir Farzaneh

Reputation: 458

1)npm i add react-router-dom;
2)import {  BrowserRouter as Router,  Routes,  Route} from "react-router-dom";
3)`function App() { return (
  <Router>
   <Routes>
     <Route path='/dashboard' element={<Dashboard />} />
     <Route path='/login' element={<Login/>} />
   </Routes>
 </Router>
);
}export default App;`

Upvotes: 1

Qin Yang
Qin Yang

Reputation: 1

import {Link,Route, Routes} from 'react-router-dom'

    <Routes>
        <Route path="/about" element={About}/>
        <Route path="/home" element={Home}/>
    </Routes>

This is working for me.
If it doesn't work for you, maybe you need to reinstall react-router-dom package.

Upvotes: 0

Hrighter Miao
Hrighter Miao

Reputation: 21

Try to run yarn add react-router, then import {Routes,Route} from 'react-router'

Upvotes: 2

daddy
daddy

Reputation: 71

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>
  );
}

Upvotes: 3

ashish pal
ashish pal

Reputation: 467

in place of Routes you should use Switch nested routes

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    function App() {
      return (
        <div>
<Router>
          <Switch>
            <Route path='/'>
              <AllMeetupsPage />
            </Route>
    
            <Route path='/new-meets'>
              <NewMeetupsPage />
            </Route>
    
            <Route path='/favs'>
              <FavoritesPage />
            </Route>
          </Switch>
</Router>
        </div>
      );
    }

Upvotes: -1

Pedro Feltrin
Pedro Feltrin

Reputation: 458

Try import { BrowserRouter as Routes, Route } from react-router-dom

Docs: https://v5.reactrouter.com/web/guides/quick-start

Upvotes: 0

Related Questions