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...
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>
);
}
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;`
Try to run yarn add react-router, then import {Routes,Route} from 'react-router'