ReactJS登录后如何跳转页面及解决组件卸载后状态更新警告

1. 修复页面跳转逻辑 #

你当前跳转失败的核心原因是路径不匹配：App.js中注册的Mainpage路由路径为/Mainpage，但你history.push传入的是../userList/Mainpage，二者不一致会导致跳转404。
如果Mainpage是一级路由，直接修改跳转路径即可：

// React Router v5 版本（你当前使用的useHistory属于v5 API）
const history = useHistory();
const handleLogin = async()=>{
  // 先执行你的登录请求逻辑
  const loginResult = await yourLoginRequest()
  if(loginResult.success){
    // 路径和Route定义的保持一致
    history.push(`/Mainpage`); 
  }
}

如果你确认Mainpage是嵌套在/userList路径下的子路由，只需将App.js里的Route路径修改为/userList/Mainpage，和跳转路径保持一致即可。
如果你的项目已经升级到React Router v6，替换API即可：

// v6版本用useNavigate替代useHistory
const navigate = useNavigate();
const handleLogin = async()=>{
  const loginResult = await yourLoginRequest()
  if(loginResult.success){
    navigate(`/Mainpage`); 
  }
}

2. 解决组件卸载后更新状态的警告 #

该警告触发的原因是：你的handleLogin是异步函数，若登录请求还未返回时登录组件就被卸载，请求返回后你执行了setState类的状态更新操作，就会触发内存泄漏警告。
通过挂载状态标记拦截卸载后的操作即可解决：

import { useRef, useEffect } from 'react';

const LoginComponent = () => {
  const history = useHistory();
  // 用ref存储组件挂载状态
  const isMounted = useRef(true);

  useEffect(() => {
    // 组件卸载时更新标记
    return () => {
      isMounted.current = false;
    }
  }, [])

  const handleLogin = async()=>{
    const loginResult = await yourLoginRequest()
    // 仅当组件仍挂载时执行后续逻辑
    if(isMounted.current && loginResult.success){
      history.push(`/Mainpage`);
      // 所有状态更新操作都放在该判断内，比如关闭加载态
      // setLoading(false)
    }
  }
  // 其余组件逻辑
}

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