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

Posted 2023-02-22

【中文标题】我的 React App 从不加载 localhost:3000 它只是一直在旋转（认为 React-Router-Dom 是问题）

【英文标题】：My React App never loads in localhost:3000 its just always spinning (Think React-Router-Dom is the issue)

【发布时间】：2021-06-01 02:44:47

【问题描述】：

我一直在使用 React-Bootstrap 在 React 中开发一个网站，它一直运行良好，直到我安装和配置 React-Router-Dom 并开始实现路由、链接等......（我还安装了 react-使用它的路由器引导程序）

我几乎可以肯定是 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"
    ]
  

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

【问题讨论】：

浏览器控制台（开发者工具）是否有报错信息？

不幸的是什么都没有注册，完全空白

【参考方案1】：

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

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

【讨论】：

感谢 Nadia，感谢它解决了这个问题！你能更深入地解释一下你的意思吗？我用于 react-router-dom 的许多指南都显示了使用开关的方式

很高兴它对你有用！你能给我一个你使用的指南的例子吗？