skip to Main Content

I’m practicing programming right now with react and javascript, and can’t figure out why nothing is showing up on my react page?

This is what my react page looks like:
This is what my react page looks like

Here is my app.js page:Here is my app.js page

Here is my index.js page:
Here is my index.js page

Here are the 3 pages I have:
AllMeetups:
AllMeetups

Favourites:
Favourites

NewMeetup:
NewMeetupPage

Any help would be useful thanks 🙂

I tried installing the react-router-dom dependency.. still nothing showed up.

3

Answers


  1. You have to wrap your Routes into a <Routes> Tag.

    Login or Signup to reply.
  2. You have to wrap your Routes into a <Switch> Tag.

    Your routes should look like this;

    <Switch>
        <Route exact path="/">
           <Home />
        </Route>
        <Route path="/users">
           <Users />
        </Route>
    </Switch>
    

    try this.

    Login or Signup to reply.
  3. Maybe you can try this version in your app.js file (and please add your code as text, not image) :

    import AllMeetupsPage from './pages/AllMeetups';
    import NewMeetupPage from './pages/NewMeetup';
    
    import React from 'react';
    import { render } from 'react-dom';
    import { BrowserRouter, Routes, Route } from "react-router-dom";
    
    class App extends React.Component { 
       constructor(props) {
       super(props);
    
       this.state = {};
     }
    
     render(){
       return (
         <BrowserRouter>
           <Routes>
             <Route path="/" element={<AllMeetupsPage />}/> 
             <Route path="/new-meetup/" element={<NewMeetupPage />}/> 
           </Routes>
         </BrowserRouter>   
       )
     }
    }
    
    render(<App></App>, document.querySelector('#root'));
    
    export default App;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search