My React App never loads in localhost:3000 its just always spinning (Think React-Router-Dom is the issue)

Question

I have been developing a website in React using React-Bootstrap, and it has worked fine up until I installed and configured React-Router-Dom and started implementing routes, links, etc...(I have also installed react-router-bootstrap to work with it)

I am almost certain it is react-router-dom that is the issue as at the beginning, I was having similar issues. When I made a new fresh project, I decided not to install react-router-dom until towards the end of the development.

When I run NPM Start, it appears on my browser with the React favicon and name of the app, but the loading spinner is just constantly loading.

In the Command-Line, the development server compiles successfully, and there are no errors - so I'm finding it hard to work out where the issue is.

All relevant code is below.

App.js

import './App.css';
import Navigation from "./Components/Nav";
import 'bootstrap/dist/css/bootstrap.min.css';

import { Col, Container, Row } from 'react-bootstrap';

import Karousel from './Components/Carousel';
import YtCard from './Components/Cards/YoutubeCard';
import BandcampCard from './Components/Cards/BandcampCard';
import SpotifyCard from './Components/Cards/SpotifyCard';
import Footer from './Components/Footer';

import { FormspreeProvider } from '@formspree/react';

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

import { HashRouter } from 'react-router-dom'
import Contact from './Pages/Contact';



function App({Component, pageProps }) {
  return (
    <FormspreeProvider project="{music-boostrap}">
      <Router>
        <div className="app">
          <div className="navigation">
            <Navigation/>
          </div>
          <Switch>
            <Route exact path="/" component={App}/>
            <Route path="/contact" component={Contact}/>
          </Switch>
          <div className="carousel">
            <Container className="carousel-container" fluid>
              <Karousel/>
            </Container>
          </div>
          <div className="description">
            <Container fluid>
              <Row>
                <Col className="desc-col">
                  <YtCard/>
                </Col >
                <Col  className="desc-col">
                  <BandcampCard/>
                </Col>
                <Col  className="desc-col">
                  <SpotifyCard/>
                </Col>
              </Row>
            </Container>
          </div>
          <Footer/>
        </div>
      </Router>
    </FormspreeProvider>

  );
}

export default App;

package.json

{
  "name": "music-bootstrap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@formspree/react": "^2.2.3",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.3",
    "bootstrap": "^4.6.0",
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "^17.0.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

If any files are missing with code you might think is relevant to solving these issues, please let me know!

Answer 1

You're attempting to render App inside App, which results in an endless recursion, you need to use a different component here

<Route exact path="/" component={App}/>