React Page is not Loading Showing Exit Page or Wait

React Page is not Loading Showing Exit Page or Wait

In this blog, we will learn a solution for a react problem, react page not loading showing page unresponsive.

Sometimes we made mistakes by nesting the parent component itself. If we nested our component by itself then it creates an infinite loop that’s why our page is not loading.

Example:

import React from 'react'
import {Nav,Navbar,NavDropdown,Container} from 'react-bootstrap'
 
 
function Header() {
  return (
    <Header className="menuheader">
        <Navbar collapseOnSelect expand="lg" className="shadow-sm ">
  <Container>
  <Navbar.Brand href="#home"><img src={process.env.PUBLIC_URL+"/next-g.png"} alt=""/></Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <div className="d-flex justify-content-end">
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav>
    <NavDropdown title="Long Term Courses" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
 
      <NavDropdown title="Web Design" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
 
      <NavDropdown title="Web Development" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
 
      <NavDropdown title="Graphic Design" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
 
      <NavDropdown title="Digital Marketing" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
 
    </Nav>
  
  </Navbar.Collapse>
  </div>
  </Container>
</Navbar>
    </Header>
  )
}
 
export default Header


In this example, as you can see our component name is Header.js and  I have also written a code inside the Header tag, so it creates an infinite loop and makes the page unresponsive. So change your tag name which is similar to your component name and run the react project again, it would be working.

So keep in mind whenever your page is not loading then you should check your component, a component can not be nested itself.