我的 React 应用程序从不加载 localhost:3000 它只是一直在旋转（认为 React-Router-Dom 是问题所在）

Question

我一直在使用 React-Bootstrap 在 React 中开发一个网站，在我安装和配置 React-Router-Dom 并开始实现路由、链接等之前它一直运行良好...（我还安装了 react-router-bootstrap 来使用它）

我几乎可以肯定它是 react-router-dom 的问题，因为一开始我遇到了类似的问题。当我做了一个新的项目时，我决定在开发快结束时才安装 react-router-dom。

当我运行 NPM Start 时，它出现在我的浏览器上，带有 React favicon 和应用程序名称，但加载旋转器只是不断加载。

在命令行中，开发服务器编译成功，没有错误 - 所以我发现很难找出问题所在。

所有相关代码如下。

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"
    ]
  }
}

如果您认为与解决这些问题相关的代码中缺少任何文件，请告诉我！

Answer 1

您正试图在 App 内渲染 App，这会导致无限递归，您需要在此处使用不同的组件

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

我的 React 应用程序从不加载 localhost:3000 它只是一直在旋转（认为 React-Router-Dom 是问题所在）

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

javascript

reactjs

react-bootstrap

react-router-dom