React Router: Component not getting displayed

Question

I have just started with React and not able to get the router working. Below is the code for router. If I use the individual components without the router, they are displayed on the screen. But with router I don't get any text on the screen across any of the paths.

Please let me know if I am missing something. Below is the code:

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

import AllMeetupsPage from './pages/AllMeetups';

import NewMeetupPage from './pages/NewMeetup';

function App() {
  return (
  <div> 
    <Route path='/' exact>
      <AllMeetupsPage />
    </Route>
    
    <Route path='/new-meetup'>
      <NewMeetupPage />
    </Route>

  </div>);
}

export default App;

OneNeptune · Accepted Answer · 2022-01-01 04:29:23Z

2

A route needs to be a descendent of router component. I'm not sure which version of react-router you're using, but this will be a BrowserRouter and Routes component for react-router v6 and on v4/v5 it'll be a BrowserRouter

Here's some examples:

v6:

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

import AllMeetupsPage from './pages/AllMeetups';

import NewMeetupPage from './pages/NewMeetup';

function App() {
  return (
  <div>
    <BrowserRouter>
      <Routes>
        <Route path="/" exact element={<AllMeetupsPage />}/>
        <Route path="/new-meetup" element={<NewMeetupPage />}/>
      </Routes>
    </BrowserRouter>
  </div>);
}

export default App;

edited Jan 1, 2022 at 4:29

answered Dec 31, 2021 at 18:30

OneNeptune

90312 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dbeings Over a year ago

Hi, I tried this but still nothing shows up one the page. import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import AllMeetupsPage from './pages/AllMeetups'; import NewMeetupPage from './pages/NewMeetup'; import FavoritesPage from './pages/Favorite'; function App() { return ( <div> <Router> <Route path='/' exact> <AllMeetupsPage /> </Route> <Route path='/new-meetup'> <NewMeetupPage /> </Route> </Router> </div>); } export default App;

OneNeptune Over a year ago

@dbeings I made a mistake on the syntax for Route, should work now if you look at the example. I was able to quickly resolve this by reading the error messages when trying above. "[AllMeetups] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>" was the error I received. Be sure to read the errors you get.

dbeings Over a year ago

Thanks a ton :) . This worked. Using component as an element attribute within the Router tag worked rather than having it as a separate tag under Route.

Lahcen · Accepted Answer · 2021-12-31 18:26:52Z

1

You missed using Switch component

import { Route , Switch } from 'react-router-dom';

function App() {
  return (
  <div> 
  <Switch>
        <Route path='/' exact>
          <AllMeetupsPage />
        </Route>
        
        <Route path='/new-meetup'>
          <NewMeetupPage />
        </Route>
    </Switch>

  </div>);
}

export default App;

answered Dec 31, 2021 at 18:26

Lahcen

1,45312 silver badges15 bronze badges

Collectives™ on Stack Overflow

React Router: Component not getting displayed

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest