React页面跳转异常求助：点击登录按钮后页面变白无报错

问题原因分析 #

• 组件结构不符合React规范：直接在组件中返回<body>标签，React应用应挂载到页面已有的<body>内根元素（如<div id="root">），自定义组件不应直接输出<body>。
• 路由与页面内容嵌套混乱：BrowserRouter和路由规则被放在登录卡片内部，同时在路由外部还渲染了完整的登录表单内容，导致路由组件与现有内容冲突，甚至可能出现组件无限嵌套（若App_login就是当前表单组件）。
• 提交按钮与Link冲突：<button type="submit">包裹Link，点击时会触发表单默认提交行为，导致页面刷新而非React Router的客户端跳转，引发页面异常。
• 普通a标签误用React Router属性：<a>标签使用了to属性，这是Link组件的专属属性，普通a标签无法识别，导致跳转失效。

修正方案 #

1. 调整组件结构与路由层级 #

将BrowserRouter作为应用最外层容器，让路由完全接管页面内容渲染，避免路由与静态内容混合。

2. 处理登录按钮跳转逻辑 #

移除按钮的submit类型，或阻止表单默认提交行为，确保点击时仅触发React Router的客户端跳转；若需登录验证，推荐使用useNavigate钩子实现跳转。

3. 替换错误的a标签为Link组件 #

将“Şifremi unuttum”的普通a标签替换为Link组件，保证路由跳转正常。

修正后的代码示例 #

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App_login.css'
import logo from "./assets/resim.png"
import { BrowserRouter, Route, Routes, Link, useNavigate } from 'react-router-dom';
import Sifre from './App_sifre'
import Anasayfa from './App_anasayfa'

function App() { 
  return (    
    <BrowserRouter>
      <div className="bg">   
        <div className="container" >
          <div className="card card-body mt-5 pb-5 shadow p-3 mb-5 bg-body rounded ">
            <Routes>
              <Route path='/' element={<Login />} />
              <Route path='/sifre' element={<Sifre />} />
              <Route path='/anasayfa' element={<Anasayfa />} />
            </Routes>
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

function Login() {
  const navigate = useNavigate();

  // 登录验证逻辑示例
  const handleLogin = (e) => {
    e.preventDefault();
    // 这里可添加用户名密码验证逻辑
    // 验证通过后跳转首页
    navigate('/anasayfa');
  }

  return (
    <>
      <h2 className="text-center text-info ">DMS Planlama Sistemi</h2>
      <div className="row mt-5 pb-5">
        <div className="col-lg-6 col-sm-12 mb-5">
          <img src={logo} alt="login" className="img-fluid" />
        </div>
        <div className="col-lg-6 col-sm-12">
          <form onSubmit={handleLogin}>
            <div className="form-group">
              <label htmlFor="email">Kullanıcı Adı:</label>
              <input type="email" className="form-control" placeholder="Kullanıcı adınız" id="email" />
            </div>
            <div className="form-group">
              <label htmlFor="pwd" style={{marginTop: '15px'}}>Şifre:</label>
              <input type="password" className="form-control" placeholder="şifreniz" id="pwd" />
            </div>
            <div className="form-group form-check">
              <label className="form-check-label">
                <input className="form-check-input" type="checkbox" /> Beni Hatırla
                <label style={{marginLeft: '30px'}}>
                  <Link to="/sifre">Şifremi unuttum</Link>
                </label>
              </label>
            </div>
            <button type="submit" className="btn btn-primary">Login</button>
          </form>
        </div>
      </div> 
    </>
  )
}

export default App;

额外说明 #

• 若无需登录验证，可直接使用Link包裹按钮内容，去掉表单提交逻辑；若需验证，useNavigate钩子更适合在验证完成后触发跳转。
• 确保App_anasayfa、App_sifre等组件无语法错误，组件无法正常渲染也是页面变白的潜在原因。

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