ReactJS Route function isn't working for me-CodePudding

I started learning ReactJS yesterday using Academind's crash course for beginners on it. There is a part where he teaches about react-router-dom. I tried using it on App.js and index.js as such:

App.js:

import { Route } from "react-router-dom";

import AllMeetupsPage from "./pages/AllMeetups";
import FavouritesPage from "./pages/Favourites";
import NewMeetupsPage from "./pages/NewMeetups";

function App() {
  return (
    <div>
      <Route path='/'>
        <AllMeetupsPage />
      </Route>
      <Route path='/favourites'>
        <FavouritesPage />
      </Route>
      <Route path='/new-meetups'>
        <NewMeetupsPage />
      </Route>
    </div>
  );
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'

import './index.css';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

There shouldn't be any error since I have fixed the syntax and imported the right files given in the video. Yet, in localhost:3000 I get this as the result.

If I just use <AllMeetupsPage /> then it works. If I put it in the route function then it doesn't. How can I fix this?

CodePudding user response：

When you are just using <AllMeetupsPage/> then it's directly rendering that page component in App.js.

It's actually not doing any routing. To use multiple you also need to wrap it within .

<div>
        <Routes>
          <Route path="/" element={<AllMeetupsPage />} />
          <Route path="/favourites" element={<FavouritesPage />} />
          <Route path="/new-meetups" element={<NewMeetupsPage />} />
        </Routes>
</div>

You can refer to the following link to get more context of the problem: [1]: ReactJS: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

CodePudding user response：

tyr this

import {Routes} from "react-router-dom"

       <Routes>
          <Route path='/'>
            <AllMeetupsPage />
          </Route>
          <Route path='/favourites'>
            <FavouritesPage />
          </Route>
          <Route path='/new-meetups'>
            <NewMeetupsPage />
          </Route>
        </Routes>