React中点击按钮如何跳转至全屏新组件页面？

你现在的问题是把SignUp组件作为Login的子组件渲染了，所以只会在Login页面的局部位置显示，没法实现全屏替换的效果。要达成目标，我们可以利用react-router-dom的路由功能，让Login和SignUp作为独立的路由页面，跳转时自动替换整个页面内容。

1. 先配置全局路由（修改index.js） #

我们需要在根组件里定义两个页面的路由规则，让不同URL对应不同的组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Login from './components/Login';
import SignUp from './components/SignUp'; // 别忘了引入SignUp组件
import reportWebVitals from './reportWebVitals';
import { HashRouter, Routes, Route } from "react-router-dom" 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    {/* 用Routes包裹所有路由规则 */}
    <Routes>
      {/* 根路径显示Login页面 */}
      <Route path="/" element={<Login />} />
      {/* /signup路径显示SignUp页面 */}
      <Route path="/signup" element={<SignUp />} />
    </Routes>
  </HashRouter>,
);
reportWebVitals();

2. 修改Login组件的跳转逻辑 #

你的Login是类组件，在React Router v6里可以用两种方式实现跳转：

方式一：用Link组件（最简单直接） #

直接把按钮换成Link组件，它会自动处理路由跳转，不需要额外的点击事件：

import React, { Component } from 'react';
import "../styles.css";
import { Link } from 'react-router-dom'; // 引入Link

export default class Login extends Component {
  constructor(props){
    super(props);
    this.state = {
      errorMessages : {},
      isSubmitted : false
    };
  }

  render() {
    const signUpSection = (
      <div>
         <label>Not Registered Yet? </label>
         <div>
            {/* 用Link替换普通按钮，to属性指定跳转路径 */}
            <Link to="/signup" className="button">Sign Up</Link>
         </div>
      </div>  
    );

    const loginForm = (
      {/* 这里保留你原来的登录表单代码即可 */}
      <div>
        {/* 用户名、密码输入框等内容 */}
      </div>
    );

    return (
      {/* 给根容器加全屏样式，确保Login页面本身是全屏的 */}
      <div className="app" style={{ height: '100vh', width: '100vw', margin: 0, padding: 0 }}>
          <div className='image'>
              <img src="/Logo.png" alt="image" />   
          </div>
          <div>{signUpSection}</div>
        <div className="login-form">
          <div className="title">Sign In</div>
          {this.state.isSubmitted ? <div>User is successfully logged in</div> : loginForm}
        </div>
      </div>
    );
  }
}

方式二：自定义HOC实现带逻辑的跳转（如果需要前置处理） #

如果你需要在点击按钮时先执行一些逻辑（比如表单验证）再跳转，可以写一个高阶组件给类组件注入跳转方法：

先创建withNavigate.js文件：

import { useNavigate } from 'react-router-dom';
import React from 'react';

export const withNavigate = (Component) => {
  return (props) => {
    const navigate = useNavigate();
    return <Component {...props} navigate={navigate} />;
  };
};

然后在Login组件中使用：

import React, { Component } from 'react';
import "../styles.css";
import { withNavigate } from './withNavigate'; // 引入这个HOC

class Login extends Component {
  constructor(props){
    super(props);
    this.state = {
      errorMessages : {},
      isSubmitted : false
    };
    this.handleSignUpClick = this.handleSignUpClick.bind(this);
  }

  handleSignUpClick() {
    // 这里可以添加你的前置逻辑，比如检查输入合法性
    console.log("执行前置逻辑完成，准备跳转");
    // 调用注入的navigate方法跳转到注册页
    this.props.navigate('/signup');
  }

  render() {
    const signUpSection = (
      <div>
         <label>Not Registered Yet? </label>
         <div>
            <button onClick={this.handleSignUpClick}>Sign Up</button>
         </div>
      </div>  
    );

    const loginForm = (
      {/* 保留原登录表单代码 */}
      <div>
        {/* 用户名、密码输入框等内容 */}
      </div>
    );

    return (
      <div className="app" style={{ height: '100vh', width: '100vw', margin: 0, padding: 0 }}>
          <div className='image'>
              <img src="/Logo.png" alt="image" />   
          </div>
          <div>{signUpSection}</div>
        <div className="login-form">
          <div className="title">Sign In</div>
          {this.state.isSubmitted ? <div>User is successfully logged in</div> : loginForm}
        </div>
      </div>
    );
  }
}

// 用withNavigate包裹Login组件，注入navigate方法
export default withNavigate(Login);

3. 确保SignUp组件全屏显示 #

最后给SignUp组件的根容器添加全屏样式，保证它覆盖整个视口：

// SignUp.js
import React from 'react';
import "../styles.css";

export default function SignUp() {
  return (
    <div className="signup-container" style={{ 
      height: '100vh', 
      width: '100vw', 
      margin: 0, 
      padding: 0,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <div className="title">Sign Up</div>
      {/* 你的注册表单内容 */}
    </div>
  );
}

这样修改后，点击Login页面的SignUp按钮就会跳转到全屏的SignUp页面，完全替换原来的Login内容啦！

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