React路由跳转失效：Laravel+React登录后无法跳转至主页

核心问题分析 #

你的代码存在几个关键问题导致跳转失效：

• 导入错误：错误将BrowserRouter重命名为Redirect，实际应导入Redirect（react-router-dom v5）或使用useNavigate钩子（v6）
• 无效的跳转方式：在异步请求回调中返回<Redirect>组件不会触发导航，事件处理函数不会渲染返回的JSX
• 状态更新逻辑误区：setJwt是异步操作，但即便状态更新，也无法通过返回组件的方式触发页面跳转

修正方案（分react-router-dom版本） #

版本1：react-router-dom v5

使用useHistory钩子手动触发导航：

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

const Login = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [jwt, setJwt] = useState("");
    const history = useHistory();

    const login = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post("/login", {
                email,
                password
            });
            
            if (response.data[0] === "credenziali errate") {
                console.log('credenziali errate');
            } else if (response.data.token) {
                setJwt(response.data.token);
                // 存储token到本地，用于后续请求鉴权
                localStorage.setItem('jwt_token', response.data.token);
                // 触发跳转至主页
                history.push("/");
            }
        } catch (error) {
            console.error('登录请求失败:', error);
        }
        setEmail("");
        setPassword("");
    }

    return (
        <div>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required/>
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required/>
            <button type="submit" onClick={login}>Login</button>
        </div>
    );
}

export default Login;

版本2：react-router-dom v6

v6移除了useHistory，改用useNavigate钩子：

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

const Login = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [jwt, setJwt] = useState("");
    const navigate = useNavigate();

    const login = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post("/login", {
                email,
                password
            });
            
            if (response.data[0] === "credenziali errate") {
                console.log('credenziali errate');
            } else if (response.data.token) {
                setJwt(response.data.token);
                localStorage.setItem('jwt_token', response.data.token);
                // 触发跳转至主页
                navigate("/");
            }
        } catch (error) {
            console.error('登录请求失败:', error);
        }
        setEmail("");
        setPassword("");
    }

    return (
        <div>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required/>
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required/>
            <button type="submit" onClick={login}>Login</button>
        </div>
    );
}

export default Login;

额外优化建议 #

• 将JWT存储到localStorage/sessionStorage，避免页面刷新后丢失登录状态
• 全局配置axios请求头，自动携带token：axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('jwt_token');
• 在路由层添加鉴权逻辑，限制未登录用户访问受保护页面

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