React JS中如何从函数跳转页面？注册后跳转登录页问题

你不需要用window.open——它是用来打开新浏览器窗口的，完全不符合单页应用内的表单切换需求。下面分两种场景给出具体实现，同时解决你担心的后续页面扩展问题：

场景1：暂时无需多页面，复用现有切换逻辑 #

基于你当前用toggleForm控制组件显示的模式，通过状态提升+回调函数实现注册成功自动切回登录表单，完全兼容现有逻辑，不会影响后续扩展：

1. 修改App.js，新增注册成功回调 #

import { useState } from 'react';
import Login from './Login';
import Register from './Register';

function App() {
  const [showLogin, setShowLogin] = useState(true);

  const toggleForm = () => {
    setShowLogin(prev => !prev);
  };

  // 注册成功后触发的回调：强制切换到登录表单
  const handleRegisterSuccess = () => {
    setShowLogin(true);
  };

  return (
    <div className="form-container">
      {showLogin ? (
        <Login toggleForm={toggleForm} />
      ) : (
        <Register 
          toggleForm={toggleForm} 
          onRegisterSuccess={handleRegisterSuccess} 
        />
      )}
    </div>
  );
}

export default App;

2. 在Register.jsx中调用回调 #

在你的注册请求成功后，执行父组件传过来的onRegisterSuccess即可：

import { useState } from 'react';

function Register({ toggleForm, onRegisterSuccess }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      // 替换成你的真实注册API请求
      await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      // 注册成功后自动切回登录
      onRegisterSuccess();
    } catch (err) {
      console.error('注册失败:', err);
    }
  };

  return (
    <form onSubmit={handleRegister}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
        required
      />
      <button type="submit">注册</button>
      <p>已有账号？<button type="button" onClick={toggleForm}>立即登录</button></p>
    </form>
  );
}

export default Register;

场景2：后续需要扩展多页面（推荐） #

如果之后要加主页、个人中心等页面，直接用状态切换会越来越混乱，此时推荐用React Router——这是React单页应用的标准路由方案，能统一管理所有页面跳转逻辑：

1. 安装依赖 #

npm install react-router-dom

2. 配置App.js路由 #

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Login from './Login';
import Register from './Register';

function App() {
  return (
    <Router>
      {/* 可选导航栏，也可以在组件内部处理跳转 */}
      <nav className="nav-bar">
        <Link to="/login">登录</Link> | <Link to="/register">注册</Link>
      </nav>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        {/* 默认进入登录页 */}
        <Route path="/" element={<Login />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 改造Register.jsx实现跳转 #

用useNavigate钩子在注册成功后跳转到登录路由：

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

function Register() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      // 注册成功后跳转到登录页
      navigate('/login');
    } catch (err) {
      console.error('注册失败:', err);
    }
  };

  return (
    <form onSubmit={handleRegister}>
      {/* 表单输入项 */}
      <button type="submit">注册</button>
      <p>已有账号？<button type="button" onClick={() => navigate('/login')}>立即登录</button></p>
    </form>
  );
}

export default Register;

内容的提问来源于stack exchange，提问作者Uroš Milošević