0

Here i'm implementing a simple routing program to route between pages in react js. I'm experiencing unexpected behaviour on run time.

Here is my App.js Code

import LoginPage from './LoginPage'
import React from 'react';
import Home from './Home'
import About from './About'
import ContactUs from './ContactUs'
import './App.css';
import {BrowserRouter,Switch,Route,Link } from 'react-router-dom'
  
class App extends Component {
  render() {
    return (
      <div className="App">
       <BrowserRouter>
    
         <div>
           <ul>
          <li>     <Link to="/Home">Home</Link>               </li> 
          <li>     <Link to="/About">About</Link>          </li>   
          <li>     <Link to="/ContactUs">ContactUs</Link>        </li> 
               </ul>
          
             {/**/} <Switch> 

                <Route  path="/Home"></Route>
                 <Home/>
                 <Route path="/About"></Route>
                 <About/>
                 <Route path="/ContactUs"></Route>
                 <ContactUs/>


               </Switch>
               </div>
         </BrowserRouter>
         {/*<LoginPage/>*/} 
      </div>
    );
  }
}
export default App;

  • When I run the code first Home.js Page should visible. It is coming without any issue Home Page

  • The issue here is when i click on Home Button again it displaying an empty page just with the routing switches. Here is the picture of the outputwhen clicking on home

  • Code of Home.js

import React, {Component} from 'react';
class Home extends Component {
    render() {
      return (
        <div className="Home_pg">
          <h1>Home Page</h1>
          <p>Home page content</p>
        </div>
      );
    }
  }
  export default Home;
  • The main problem which I'm facing is when i clicked either ContactUs or About in the main page its not displaying the contents on the respective pages.
  • It is displaying the same contents for the Home Page.
  • Image when clicking About or Contact USImage when clicking About or Contact US
  • Here is the code for ContactUs.js and About.JS

import React, {Component} from 'react';
class About extends Component {
    render() {
      return (
        <div >
          <h1>About Page</h1>
          <p> About content</p>
        </div>
      );
    }
  }
  export default About;

import React, {Component} from 'react';

 - **ContactUs.js**

class ContactUs extends Component {
    render() {
      return (
        <div >
          <h1>Contact Page</h1>
          <p> Contact content</p>
        </div>
      );
    }
  }
  export default ContactUs;

Here i'm not clear why it is happening . Is it any issue with my class components?.Any suggestions or solution regarding this will be more than helpful for me.

Leia
  • 11
  • 4

1 Answers1

0
You have to put each component inside its relevant Route tag.
In addition I suggest to add two things:
- lazy loading for components.
- a Suspense tag with some loading indication (text or spinner).

import LoginPage from './LoginPage'
import React, { lazy, Suspense } from 'react';
import './App.css';
import {BrowserRouter,Switch,Route,Link } from 'react-router-dom';

const Home= lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const ContactUs = lazy(() => import('./ContactUs'));
  
class App extends Component {
  render() {
    return (
      <div className="App">
       <BrowserRouter>
         <div>
           <ul>
             <li><Link to="/Home">Home</Link></li> 
             <li><Link to="/About">About</Link></li>   
             <li><Link to="/ContactUs">ContactUs</Link></li> 
           </ul>
           <Suspense fallback={<div>loading..</div>}
              <Switch> 
                <Route  path="/Home"><Home/></Route>
                <Route path="/About"><About/></Route>
                <Route path="/ContactUs"><ContactUs/></Route>
              </Switch>
           </Suspense>
          </div>
         </BrowserRouter>
      </div>
    );
  }
}
export default App;
amir.algazi
  • 189
  • 9