React-Router-Dom v5升级v6遇Object(...) is not a function错误求助

常见原因及排查步骤 #

1. 业务组件仍在使用v5废弃API #

React-Router-Dom v6移除了大量v5的API，业务组件如果未同步修改会直接触发错误：

• useHistory 替换为 useNavigate：v6不再导出useHistory，需用useNavigate实现页面跳转逻辑
• withRouter 已移除：v6删除了这个高阶组件，组件需改用useParams、useNavigate、useLocation等hooks获取路由相关数据
• Route不再传递match/location/history props：旧组件如果解构这些props会得到undefined，进而触发"Object(...) is not a function"错误

2. 依赖版本不兼容 #

• React版本要求：v6需要react/react-dom版本≥16.8.0（依赖hooks特性），若项目中react版本过低，会导致hooks无法正常运行
• 路由相关依赖未同步升级：确保react-router、react-router-dom（TypeScript项目需同步升级@types/react-router-dom）都升级到v6版本，禁止v5和v6版本混合存在
• 第三方路由库未适配v6：比如redux-react-router、react-router-config等库，若仍停留在支持v5的版本，会和v6产生冲突，需升级到适配v6的版本或替换方案

3. 路由配置写法不符合v6规范 #

v6对路由配置的写法做了强制要求：

• Route的element属性必须传React元素：v5的component={Home}或render={() => <Home />}写法在v6中无效，必须改为element={<Home />}

  // 错误写法（v5）
  <Route path="/home" component={Home} />
  
  // 正确写法（v6）
  <Route path="/home" element={<Home />} />
  

• 嵌套路由需用Outlet渲染：v6的嵌套路由需要在父Route的children中定义子路由，父组件通过<Outlet />渲染子路由内容，旧的嵌套写法会导致组件无法正确挂载

排查建议 #

1. 全局搜索项目中是否存在v5特有的API（useHistory、withRouter、match/location/history props解构），逐一替换为v6的对应实现
2. 检查package.json中react、react-dom、react-router-dom的版本，确保满足v6的版本要求
3. 核对所有业务路由的配置写法，确保符合v6的规范
4. 暂时注释部分业务路由，逐步排查是哪个组件或路由配置导致的错误，缩小问题范围

内容的提问来源于stack exchange，提问作者Ondřej Krajčík