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