React JSX登录成功后跳转不同文件夹下页面失败求助

算力阿峰

2026-10-16

问题根因

Redirect 组件用法错误
Redirect 是声明式跳转组件，仅在组件的渲染返回逻辑中使用才会生效，在异步请求的回调函数中返回 JSX 不会被 React 渲染，无法触发跳转。
history.push 参数错误
history.push() 接收的参数是路由配置中定义的访问路径，不是项目文件的相对路径。你填写的 ../mainPage/blog 是本地文件路径，和路由规则不匹配，导致跳转失效。
注意 useHistory 是 React Router v5 的 API，如果你项目安装的是 v6 版本，该 API 已被废弃，需要替换为 useNavigate。

解决方案

1. 确认 React Router 版本

在项目根目录执行命令查看版本：
npm list react-router-dom

若为 v5 版本，继续使用 useHistory 即可
若为 v6 版本，将 useHistory 替换为 useNavigate：

// v6版本写法
import { useNavigate } from 'react-router-dom'
export function LoginForm(props) {
  const navigate = useNavigate()
  // 跳转时调用
  navigate('/blog')
}

2. 核对路由配置

找到项目的路由规则文件（通常是 App.jsx 或 router 目录下的配置文件），确认你给 blog.jsx 配置的路由路径，示例配置如下：

import Blog from './mainPage/blog'

// v5路由配置
<Route path="/blog" component={Blog} />

// v6路由配置
<Route path="/blog" element={<Blog />} />

3. 修正跳转逻辑

将 history.push 的参数替换为路由配置里对应的路径，不要填文件相对路径：

const login =() =>{
  Axios.post('http://localhost:3001/login',{
    email:email,
    password:password
  }).then((response)=>{
    if(response.data.message){
      alert(response.data.message)
    } else {
      // 此处填路由配置中对应的path值，比如上文示例的/blog
      history.push("/blog");
    }
  })
}