反应路由不加载页面

Question

Hi 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 thank you in advance

Answer 1

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.

Answer 2

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;

Answer 3

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