ReactJs/ExpressJs/Axios实现登录成功后跳转Home.jsx页面方法

首先明确核心逻辑：Express 后端只负责返回登录校验的接口结果，无法直接跳转前端的 .jsx 页面，所有页面跳转逻辑需要在 React 前端通过 React Router 实现。

1. 配置React Router基础路由 #

先安装路由依赖：
npm install react-router-dom

在项目根组件（通常是App.jsx）配置路由映射，关联登录页、首页的访问路径：

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Login from './Login';
import Home from './Home';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<Home />} />
        {/* 未匹配路径默认重定向到登录页 */}
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </BrowserRouter>
  )
}
export default App;

2. 修改Login.jsx的请求成功回调逻辑 #

以当前主流的React Router v6版本为例，使用useNavigate钩子获取跳转方法，在Axios收到后端登录成功响应后触发跳转：

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

function Login() {
  const navigate = useNavigate();
  // 补充用户名、密码状态绑定
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const loginSubmit = () => {
    Axios.post("http://localhost:3001/login", {
      user: username,
      pass: password
    }).then((rs) => {
      // 登录成功跳转至首页，replace:true会替换浏览历史，避免点返回按钮回到登录页
      navigate('/home', { replace: true });
    }).catch((err) => {
      console.log('登录请求错误：', err)
      // 可在此处添加登录失败提示
    })
  }

  return (
    <div>
      <input value={username} onChange={e => setUsername(e.target.value)} placeholder="请输入用户名" />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="请输入密码" />
      <button onClick={loginSubmit}>登录</button>
    </div>
  )
};
export default Login;

3. 精简后端接口逻辑 #

删除后端代码里的前端跳转相关注释，后端只需要返回校验结果即可，不需要处理页面跳转：

app.post("/login", (req, res)=>{
  FIREBASE_AUTH_TO_SUBMIT_USER_DATA
  .then(()=>{
    res.send("successfully logged");
  })
  .catch((error)=>{
    res.status(401).send("login failed");
  });
})

补充说明 #

• 如果你用的是React Router v5版本，替换跳转API即可：使用useHistory钩子获取history实例，调用history.replace('/home')实现跳转，整体逻辑不变。
• 注意提前配置Express端的cors跨域中间件，避免前端接口请求被浏览器跨域策略拦截。
• 生产环境建议在登录成功后存储后端返回的身份凭证，加路由守卫拦截未登录用户的首页访问请求。

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