React电商网站中browserHistory.push无法跳转问题求助

问题概述 #

开发React电商网站登录组件时，用户提交表单完成认证后，调用browserHistory.push('/')跳转首页却无内容显示、功能失效。安装react-history时因依赖冲突使用npm i react-history --force，控制台抛出错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'oneOf')

错误原因 #

1. react-history已废弃：该包是React Router v4及更早版本的依赖，与当前使用的react-router-dom v6完全不兼容，强行安装后会因缺失旧版PropTypes等依赖导致报错。
2. 自定义history不共享路由栈：手动创建的browserHistory与Router组件内部维护的路由状态不互通，调用push无法触发页面更新。

修复步骤 #

1. 移除废弃依赖 #

执行命令卸载冲突的react-history包：

npm uninstall react-history

2. 用useNavigate替代自定义history #

react-router-dom v6内置useNavigate钩子，专门用于组件内路由导航，完全替代旧版history对象的功能。

3. 修复组件语法错误 #

修正useState的错误写法：原代码中const {avatar,setAvatar}=useState;是语法错误，需改为数组解构的正确形式。

修改后的关键代码 #

LoginSignUp组件核心修改 #

// 移除react-history相关导入
// import { createBrowserHistory } from 'react-history'
// export const browserHistory = createBrowserHistory();

// 导入useNavigate
import { Link, useNavigate } from 'react-router-dom';

const LoginSignUp = () => { // 移除props中的browserHistory参数
   const dispatch = useDispatch();
   const alert = useAlert();
   const navigate = useNavigate(); // 初始化导航钩子
   
   // 修复useState写法
   const [avatar, setAvatar] = useState(null);
   const [avatarPreview, setAvatarPreview] = useState("/Profile.png");

   // ...其他代码保持不变

   useEffect(() => {
     if(error){
       alert.error(error);
       dispatch(clearErrors())
     }
     if (isAuthenticated) {
       navigate('/'); // 用navigate替代browserHistory.push
     }
   },[dispatch,error,alert,isAuthenticated,navigate])

   // ...其他代码保持不变
}

App.js无需修改 #

原有的Router和Routes配置保持不变，useNavigate会自动关联Router内部的路由栈。

验证效果 #

1. 重新安装依赖：npm install
2. 启动项目：npm start
3. 登录认证通过后，将自动跳转到首页并正常渲染内容，控制台无报错。

内容的提问来源于stack exchange，提问作者Mirza M Azeem