基本的 React 应用程序一直挂在 Localhost 上

Question

I have some error in my code, that when I launch 'npm start' on my React App, the page never loads and is continually hanging making my mac sound like it's gearing for liftoff. No errors in the console appear and no errors in my terminal either.

This is my Main.js:

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import NavBar from "./Navbar";
import Content from "./Content";
import Book from './Book.jsx';

import "./MainStyles.css";

export default class main extends Component {
  render() {
    return (
      <div className="wrapper">
         <Router>
        <nav className="navbar justify-content-end navbar-expand-lg sticky-top navbar-dark" style={{ backgroundColor: "#556B2F" }}>
          <a className="navbar-brand title" href="#"> Refuting Dish</a>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link to="/book" className="nav-link" href="#"> Book </Link>
              </li>
            </ul>
          </div>
        </nav>
      </Router>
      <Switch>
        <Route exact path="/" component={main}/>
        <Route path="/book" component={Book}/>
      </Switch>
      <Content /> 
    </div>

This has something to do with the <Router> , or the <Switch> tags, as when I comment them out, the page loads within seconds.

This is my browser + console:

And my terminal:

I suppose what I'm most frustrated about is that I have no hints, either in my console or terminal that tell me what's breaking my App. If anyone can suggest a tool or extension that would catch this type of error in future cases, I would surely appreciate that.

Thank you.

Answer 1

You Put the component Main in the same component. It will load until infinite