Localhost无法加载标签页持续转圈 React项目运行异常问题求助

核心问题：无限递归渲染导致页面卡死 #

你的代码存在嵌套路由和组件循环引用的问题，直接触发了无限渲染循环，所以浏览器一直转圈加载不出内容：

• App.js的Router下直接渲染了<Register />组件，没有走Switch路由匹配逻辑
• Register组件内部又定义了路径/和/register指向Register组件本身，进入组件就会再次触发自身渲染，形成死循环
• Login组件同样内部嵌套了<Router>和重复的路由定义，react-router要求整个应用只需要一个最外层的Router即可，嵌套Router会导致路由匹配逻辑混乱

其他次要错误 #

• 部分Route的path属性缺少开头斜杠，比如path="login"应该写成path="/login"
• input标签在React中应该是自闭合写法，比如<input type="text" className="form-input" />，你写的成对标签不符合规范
• Register组件内部不需要再引入Switch和Route，路由规则统一放在最外层App.js即可
• Login组件里把Link放在Route内部是多余写法，不需要用Route包裹Link标签

修复后的代码示例 #

1. 修复App.js #

import "./App.css";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import {Login} from './pages/Login/Login';
import {Register} from './pages/Register/register';

function App() {
 return (
   <Router>
     <Switch>
       <Route path='/' exact component={Register} />
       <Route path='/login' component={Login} />
       <Route path='/register' component={Register} />
     </Switch>
   </Router>
 )
}

export default App;

2. 修复Login.js #

删掉内部的Router、Switch、Route相关代码，只保留页面UI和Link逻辑，修正input标签写法：

import { Link } from "react-router-dom";
import "../Login/login.css";

export const Login = () => {
  return (
    <div className="App">
      <header className="App-header">
        <div className="left-container">
          <div>
            <img className="logo" src="logo.svg" alt="logo" />
          </div>
          <div className="boxes">
            <div className="box">
              <h2>Contact us</h2>
            </div>
            <div className="box">
              <h2>About us</h2>
            </div>
            <div className="box">
              <h2>Features</h2>
            </div>
            <div className="box">
              <Link to="/register">
                <h2>Register</h2>
              </Link>
            </div>
          </div>
        </div>

        <div className="right-container">
          <div className="register">
            <h1>Login</h1>
            <p className="sub-text">Please login to use Arappnid.</p>

            <form className="form-container">
              <div className="form-inner">
                <div className="form-inner">
                  <label>Username</label>
                  <input type="text" className="form-input" />
                </div>
                <div className="form-inner">
                  <div className="form-inner">
                    <label>Password</label>
                    <input type="password" className="form-input" />
                  </div>
                  <div>
                    <div className="button-container">
                      <button className="submit">Submit</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <h1>Arappnid</h1>
            <div className="reg-benefits-cont">
              <p>
                Ipsum eiusmod fugiat commodo sit. Nulla dolor deserunt et
                officia nulla. Eiusmod sint do aliquip ullamco amet minim
                velit ut mollit qui. Veniam tempor quis nostrud sit ut et
                incididunt commodo ut dolor dolor non est excepteur. Velit id
                sunt consequat sint deserunt magna Lorem nostrud in laborum
                velit voluptate. Magna ut sit non eu nostrud. Amet magna qui
                cupidatat quis culpa amet elit culpa.
              </p>
            </div>
          </div>
        </div>
      </header>
    </div>
  );
};

export default Login;

3. 修复Register.js #

删掉内部的Switch、Route相关代码，修正input标签写法：

import {ReactComponent as Cockroach } from '../../images/svg/cockroach.svg';
import {ReactComponent as Spider } from '../../images/svg/tarantula.svg';
import {ReactComponent as Reminders} from '../../images/svg/reminders.svg';
import {ReactComponent as Gallery} from '../../images/svg/gallery.svg';
import { Link } from 'react-router-dom';

export const Register = () =>{
  return(
    <header className="App-header">
      <div className="left-container">
        <div>
          <img className="logo" src="logo.svg" alt="logo"/>
        </div>
        <div className="boxes">
          <div className="box">
            <h2>Contact us</h2>
          </div>
          <div className="box">
            <h2>About us</h2>
          </div>
          <div className="box">
            <h2>Features</h2>
          </div>
          <div className="box">
            <Link to='/login'><h2>Login</h2></Link>
          </div>
        </div>
      </div>
      <div className="right-container">
        <div className="register">
          <h1>Register</h1>
          <p className="sub-text">
            Please fill out the form below to register for Arappnid and use
            the software.
          </p>
          <form className="form-container">
            <div className="form-inner">
              <label className="first-name">Name</label>
              <input type='text' className="form-input" />
            </div>
            <div className="form-inner">
              <label>Surname</label>
              <input type='text' className="form-input" />
            </div>
            <div className="form-inner">
              <label>Username</label>
              <input type='text' className="form-input" />
            </div>
            <div className="form-inner">
              <label>Email</label>
              <input type='email' className="form-input" />
            </div>
            <div className="form-inner">
              <label>Password</label>
              <input type='password' className="form-input" />
            </div> 
            <div>
              <div className="button-container">
                <button className="submit">Submit</button>
              </div>
            </div>
          </form>
          <h1>Benefits of Registering</h1>
          <div className="reg-benefits-cont">
            <div className="benefits remove-margin">
              <Cockroach fill='rgb(117, 0, 128)'/>
              <h4>Track Feeds</h4>
            </div>
            <div className="benefits">
              <Spider className='pic' />
              <h4>Track Unlimited Spiders</h4>
            </div>
            <div className="benefits">
              <Reminders className='pic'/>
              <h4>Receive Alerts</h4>
            </div>
            <div className="benefits">
              <Gallery className="pic"/>
              <h4> Personal Gallery</h4>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
export default Register;

修改完成后重启项目即可正常加载。

内容的提问来源于stack exchange，提问作者MikeyC