登录时重定向至空白页面求助：React+Node.js配置排查

核心问题 #

1. 错误的跳转方式：使用window.location.replace会触发页面全量刷新，破坏React单页应用（SPA）的路由机制，导致React Router无法正确匹配并渲染AdminPage组件。
2. 路由配置缺失：没有在全局路由中为/AdminPage路径注册对应的组件。
3. 后端无需处理重定向：登录验证仅需返回验证结果，页面跳转完全是前端路由的职责，后端不需要参与。

具体修复步骤 #

1. 修改前端登录跳转逻辑（使用React Router的路由钩子） #

如果你的项目使用react-router-dom v6+，替换window.location.replace为useNavigate钩子：

import {
  BrowserRouter as Router,
  Route,
  useNavigate // 新增导入
} from "react-router-dom";
import React, { useState } from 'react'

import Navbar from '../../common/Navbar/Navbar';
import AdminPage from './AdminPage';

const User = () => {
    const navigate = useNavigate(); // 初始化navigate钩子
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState('');

    const onSubmitForm = async e => {
        e.preventDefault();
        try {
            const response = await fetch(`http://localhost:2136/login`,{
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password }),
            });
            
            if (response.status === 404) {
                setError('Invalid email or password');
            } else {
                // 使用React Router跳转，而非原生window.location
                navigate('/AdminPage');
            }
        } catch (err) {
            console.error(err);
            setError('An error occurred. Please try again later.');
        }
    };

    // 其余代码不变...
}

export default User

2. 配置全局路由（在根组件如App.js中） #

确保你的路由配置包含/AdminPage的匹配规则，示例如下：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import User from './path-to-your/User'; // 替换为实际路径
import AdminPage from './path-to-your/AdminPage'; // 替换为实际路径

function App() {
  return (
    <Router>
      <Routes>
        {/* 登录页面路由 */}
        <Route path="/" element={<User />} />
        {/* Admin页面路由 */}
        <Route path="/AdminPage" element={<AdminPage />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 修复后端代码的小问题 #

你的后端代码存在两处小错误，需要修正：

• listen方法中日志打印的端口与实际监听的2136不一致
• catch块中错误使用了未定义的response，应该用res

修改后的后端代码：

const client = require('../../db')
const express = require('express');
const app = express();
const cors = require("cors");

app.use(cors());
app.use(express.json()); //req.body

// 修正端口日志
app.listen(2136, ()=>{
    console.log("Server is now listening at port 2136");
})

client.connect();

app.post("/login", async (req, res) => {
  try {
    const { email, password } = req.body;

    const user = await client.query(
      `SELECT * FROM users WHERE email=$1 AND password=$2`,
      [email, password]
    );
    
    if (user.rows.length === 0) {
      res.status(404).send("Kullanıcı adı veya şifre yanlış");
    } else {
      res.send("Kullanıcı adı veya şifre doğru");
    }
    
  } catch (err) {
    // 修正为res而非response
    res.status(500).json({ message: "Error in invocation of API: /login" })
  }
});

关键说明 #

• 后端只负责验证用户身份并返回结果，不需要处理页面重定向，所有路由跳转逻辑都由前端React Router管理。
• 单页应用中，必须使用React Router提供的跳转方法（如useNavigate、history.push），避免使用原生window.location，否则会触发页面刷新，导致路由状态丢失。

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