React中发送POST请求后能否跳转其他组件？应从前端还是后端跳转？

你当前是前后端分离的React SPA项目，该场景优先选择前端路由跳转，优势如下：

• 不会触发浏览器整页刷新，用户交互体验更流畅，符合SPA应用的设计逻辑
• 路由逻辑统一由前端维护，和你已引入的React Router能力完全适配，不需要后端额外处理302跳转逻辑，前后端职责拆分更清晰，后端仅需负责身份校验返回对应状态即可
• 错误场景处理更灵活，登录失败时可以直接在当前登录页展示错误提示，无需跳转后再回退

后端接口改造 #

原接口仅返回字符串提示，不利于前端做状态判断，建议改造为返回结构化JSON数据：

// routes/api/login.js
router.post("/", (req, res) => {
  User.find(
    { firstname: req.body.firstname },
    "password",
    function (err, result) {
      if (err) {
        console.log(err);
        return res.status(500).json({ code: 500, msg: "服务器内部错误" });
      }
      if (result.length > 0) {
        if (result[0].password === req.body.pass) {
          // 登录成功，后续可扩展返回jwt token用于身份校验
          return res.json({ code: 200, msg: "登录成功" });
        } else {
          return res.json({ code: 400, msg: "用户名或密码错误" });
        }
      } 
      return res.json({ code: 404, msg: `${req.body.firstname} 用户不存在` });
    }
  );
});

注意：当前代码中直接明文存储、比对密码的方式存在极高安全风险，生产环境请务必使用bcrypt等加密工具对密码加盐哈希后存储，校验时也使用加密后的字符串比对。

前端登录逻辑改造 #

根据你使用的React Router版本选择对应跳转方法，以下是React Router v5的实现（你当前的Switch写法属于v5版本）：

// Component/Login.js
import { useHistory } from 'react-router-dom';

function Login() {
  // 调用useHistory钩子获取路由操作对象
  const history = useHistory();
  // 你的其他state定义，比如name、pass的声明
  function myFunc(e) {
    e.preventDefault();
    fetch("http://localhost:5000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ firstname: name, pass }),
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.code === 200) {
          // 登录成功，跳转到你指定的页面，比如后台首页/dashboard
          history.push('/dashboard');
          // 可在此处将后端返回的token存储到localStorage/sessionStorage
        } else {
          // 登录失败，直接在当前页展示错误提示即可
          alert(res.msg);
          // 也可以将错误提示存到state，渲染到页面指定位置，替代alert
        }
      })
      .catch(err => {
        console.error('登录请求失败', err);
        alert('请求异常，请稍后重试');
      });
  }
  // 你的其他组件逻辑、渲染代码
}

如果你使用的是React Router v6版本，将useHistory替换为useNavigate即可：

import { useNavigate } from 'react-router-dom';
// 组件内调用
const navigate = useNavigate();
// 跳转逻辑替换为
navigate('/dashboard');

路由配置修复 #

你当前App.js的路由顺序存在问题，Switch会优先匹配第一个符合规则的路由，path="/"会匹配所有路径，放在最前面会导致后面的/Login路由永远不会被命中，调整路由顺序如下：

<Router>
  <div className="App">
    <Switch>
      <Route path="/signup" component={Signup} />
      <Route path="/Login" component={Login} />
      <Route path="/" component={Login} />
      <!-- 后续新增登录后可访问的页面，比如仪表盘 -->
      <!-- <Route path="/dashboard" component={Dashboard} /> -->
    </Switch>
  </div>
</Router>

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