使用AWS Cognito开发登录系统时Navbar组件history.push报错排查

嘿，你猜的没错！这个Cannot read property 'push' of undefined错误确实是因为Navbar组件没有嵌套在Route组件内部导致的——React Router只会给直接被Route渲染的组件自动注入history、location这些路由相关的props，而你的Navbar是直接放在Router下面的，并没有被任何Route包裹，所以它拿不到history对象。

反观你其他能正常使用history.push的组件（比如Home、Products），它们都是通过Route的render方法传递了{...props}，这其中就包含了history，所以能正常工作。

解决方案：用withRouter高阶组件包装Navbar #

这是React Router v5（你当前使用的版本，因为用了Switch）里最直接的解决办法，withRouter会把路由相关的props注入到你的类组件中。具体步骤：

1. 在Navbar.js中导入withRouter：

import React, { Component } from "react";
import { Auth } from "aws-amplify";
import { withRouter } from "react-router-dom"; // 新增这一行

2. 修改组件的导出方式，用withRouter包裹Navbar：

// 把原来的 export default Navbar; 改成下面这样
export default withRouter(Navbar);

做完这两步后，你的Navbar组件就能正常访问this.props.history了，this.props.history.push("/")也能正常跳转页面。

额外说明 #

不需要修改App.js中Navbar的调用方式，依然保持<Navbar auth={authProps} />即可——withRouter会自动把路由props和你传入的authprops合并后传递给Navbar组件。

内容的提问来源于stack exchange，提问作者Filip Simin