React项目登录成功后无法跳转至首页问题求助

我开发了一个带有登录功能的React项目，使用react-router-dom实现路由管理，后端基于Express与MongoDB搭建。登录接口验证通过并返回token后，调用navigate('/')无法跳转到首页，无法定位问题根源，相关代码如下：

Login组件代码（login.js） #

import './Login.css'
import { Link, useNavigate } from 'react-router-dom';
import { useState } from 'react';
import axios from 'axios';

function Login() {
  const navigate = useNavigate()
   
  const [username, setusername] = useState('');
  const [password, setpassword] = useState('');

  const handleApi = () => {
    console.log({ username, password });

    const url = 'http://localhost:4000/login';
    const data = { username, password };

    axios.post(url, data)
      .then((res) => {  
        console.log(res.data);
        if (res.data.message) {
          alert(res.data.message);
          if (res.data.token) {
            localStorage.setItem('token', res.data.token);
            navigate('/');
          }
        }
      })
      .catch((err) => {
        console.log(err);
        alert("SERVER ERROR");
      })
  }

  return (
    <div>
      <div className="container">
        <h1>LOGIN</h1>

        <form>
          <input
            type="text"
            placeholder="Enter your Email ID"
            value={username}
            onChange={(e) => {
              setusername(e.target.value)
            }}
            required
          />
          <input
            type="text"
            placeholder="Enter your Password"
            value={password}
            onChange={(e) => {
              setpassword(e.target.value)
            }}
            required
          />
          <button className="btn" onClick={handleApi}>LOGIN</button>
          <p>Not Having An Account <Link to="/signup">Signup</Link></p>
        </form>
      </div>
    </div>
  )
}

export default Login;

路由配置文件（index.js） #

import './index.css';
import * as React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider
} from "react-router-dom";
import Home from './components/Home.jsx';
import Login from './components/Login/Login.jsx';
import Signup from './components/Signup/Signup.jsx';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <div>About</div>,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/signup",
    element: <Signup />,
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

后端Express代码 #

const express = require('express')
const cors = require('cors')
var jwt = require('jsonwebtoken');
const bodyParser = require('body-parser')

const app = express()
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

const port = 4000

const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost:27017/sparebazar").then(()=>{
    console.log("mongoose connected ")
}).catch((e)=>{
 console.log("not connected" )
 console.log(e)
})
const Users = mongoose.model('Users', { username: String, password: String });

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.post('/signup', (req, res) => {
  console.log(req.body);

  const username = req.body.username;
  const password = req.body.password;


  const user = new Users({ username: username, password: password });
  user.save()
    .then(() => {
      res.send({ message: 'saved successfully' })
    })
    .catch(() => {
      res.send({ message: 'server error' })
    })
})

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  Users.findOne({ username: username })
    .then((result) => {
      if (!result) {
        console.log( " user not found");
        res.send({ message: 'User Not Found' });
      }
      else {
        if (result.password == password) {
          const token = jwt.sign({
            data: result
          }, 'MYKEY', { expiresIn: 60 });
          console.log(result," user data is correct ");
          res.send({ message: 'Find successfully', token: token })
        }
        if (result.password != password) {
          console.log(" password data is wrong ");
          res.send({ message: 'Password is Wrong' })
        }
      }

    })
    .catch(() => {
      res.send({ message: 'server error' })
    })
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

问题修复方案 #

1. 阻止表单默认提交行为
   登录按钮在<form>内部，点击时会触发浏览器默认的表单提交，导致页面刷新，navigate逻辑被打断。修改handleApi函数，添加事件阻止：

   const handleApi = (e) => {
     e.preventDefault(); // 阻止表单默认提交
     // 原有请求逻辑保持不变
   }
   

   按钮点击绑定无需额外修改，事件参数会自动传递。

2. 优化后端登录逻辑
   后端代码中，密码正确后仍会执行密码错误的判断分支，改成else if避免冗余执行：

   else {
     if (result.password == password) {
       // 生成并返回token逻辑
     } else if (result.password != password) {
       res.send({ message: 'Password is Wrong' })
     }
   }
   

3. 验证跳转逻辑执行情况
   在navigate('/')前添加console.log('执行首页跳转')，确认该代码是否被触发。如果没执行，检查res.data.token是否存在——后端返回'Find successfully'时会携带token，正常情况下逻辑会走到跳转步骤。

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