I am learning react and I got stuck on a problem. I have started working on routing but its not working at all.
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-meetup'>
<NewMeetupsPage />
</Route>
<Route path = '/favorites'>
<FavoritesPage />
</Route>
</div>
);
}
export default App;
I have a blank screen even though the pages should load. Each page when open should only print one line just to see that I can see routing working however all I see is a blank space meaning its not working correctly.
You can view the full code here: https://github.com/Kroplewski-M/Routing
You have to wrap your routes with <BrowserRouter> which is done already in index file which is fine. Next, Routes must be wrapped with <Routes> component as of 'react-router-dom' latest version v6
import { Routes, Route } from "react-router-dom";
function App(){
return (
<div>
<Routes>
<Route path="/" element={<AllMeetupsPage />} />
<Route path="/new-meetup" element={<NewMeetupsPage />} />
</Routes>
</div>
);
}
export default App;
Simply you can handle the routing in your index.js like this:
import { BrowserRouter, Route, Routes } from "react-router-dom";
ReactDOM.render(
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<AllMeetupsPage />} />
<Route path="/new-meetup" element={<NewMeetupsPage />} />
<Route path="/favorites" element={<FavoritesPage />} />
</Routes>
</BrowserRouter>
</div>,
document.getElementById("root")
);
You are not wrapping the route under the router that's why your route is not working.
Here is the code.
import {Router,Route} from 'react-router-dom'
import AllMeetupsPage from './pages/AllMeetups';
import NewMeetupsPage from './pages/NewMeetups';
import FavoritesPage from './pages/Favorites';
function App() {
return (
<div>
<Router>
<Route path = '/'>
<AllMeetupsPage />
</Route>
<Route path = '/new-meetup'>
<NewMeetupsPage />
</Route>
<Route path = '/favorites'>
<FavoritesPage />
</Route>
</Router>
</div>
);
}
export default App;
I hope it will work.