TypeError：无法读取反应应用程序中未定义的属性“推送”

Question

我有一个反应应用程序。我在我的应用程序中使用路由器（HashRouter，Route，Switch）。当我单击标题页面中的注销按钮时，该页面应重定向到登录页面。但它显示一条错误消息为“ TypeError: Cannot read property 'push' of undefined"。请检查以下代码并告知问题所在

App.js :-

import 'devextreme/dist/css/dx.common.css';

import 'devextreme/dist/css/dx.material.blue.light.css';
import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
// import { renderRoutes } from 'react-router-config';
import './App.scss';



const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;

// Containers
const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));

// Pages
const Login = React.lazy(() => import('./views/Pages/Login'));



class App extends Component {

  render() {

    return (
      <HashRouter>
          <React.Suspense fallback={loading()}>
            <Switch>
              <Route exact path="/" name="Login Page" render={props => <Login {...props}/>} />
              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
            </Switch>
          </React.Suspense>
      </HashRouter>
    );
  }
}

export default App;

Routes.js :-

import React from 'react';

const Dashboard = React.lazy(() => import('./views/Dashboard'));
const Users = React.lazy(() => import('./views/Users/Users'));
const User = React.lazy(() => import('./views/Users/User'));
const login = React.lazy(() => import('./views/Pages/Login'));
const UserList = React.lazy(() => import('./views/Users/UserList'));
const UserEntry = React.lazy(() => import('./views/Users/UserEntry'));
const MenuList = React.lazy(() => import('./views/Menu/MenuList'));
const MenuEntry = React.lazy(() => import('./views/Menu/MenuEntry'));
const ZohoDashboard = React.lazy(() => import('./views/Zoho/ZohoDashboard'));


const routes = [

  { path: '/', exact: true, name: 'Home' },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/users', exact: true,  name: 'Users', component: Users },
  { path: '/users/:id', exact: true, name: 'User Details', component: User },
  { path: '/UserList', exact: true,  name: 'UserList', component: UserList},
  { path: '/UserEntry/:id/:mode', exact: true,  name: 'UserEntry', component: UserEntry},
  { path: '/MenuList', exact: true,  name: 'MenuList', component: MenuList},
  { path: '/MenuEntry/:id/:mode', exact: true,  name: 'MenuEntry', component: MenuEntry},
  { path: '/ZohoDashboard/:id', exact: true,  name: 'Zoho dashboard', component: ZohoDashboard}
];

export default routes;

DefaultHeader.js:-

import React, { Component } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
import PropTypes from 'prop-types';

import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
import logo from '../../assets/img/brand/logo.jpg'
import users from '../../assets/img/brand/users.jpg'
import sygnet from '../../assets/img/brand/sygnet.svg'
import ConfigItem from '../../Config';
const propTypes = {
  children: PropTypes.node,
};

const defaultProps = {};

class DefaultHeader extends Component {


  ***onLogout = (event) => {
    //alert('logout');
    event.preventDefault();
    localStorage.clear();
    this.props.history.push('/') // push to login page

  }***

  render() {

    // eslint-disable-next-line
    const { children, ...attributes } = this.props;
    //alert(ConfigItem[0].EmpPath);
    return (

      <React.Fragment>
        <AppSidebarToggler className="d-lg-none" display="md" mobile />
        <AppNavbarBrand
          full={{ src: logo, width: 120, height: 45, alt: 'KH Logo' }}
          minimized={{ src: sygnet, width: 30, height: 30, alt: 'KH Logo' }}
        />
        <AppSidebarToggler className="d-md-down-none" display="lg" />

        <Nav className="d-md-down-none" navbar>
          <NavItem className="px-3">
            <NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink>
          </NavItem>
          <NavItem className="px-3">
            <Link to="/users" className="nav-link">Users</Link>
          </NavItem>
          <NavItem className="px-3">
            <NavLink to="#" className="nav-link">Settings</NavLink>
          </NavItem>
        </Nav>
        <Nav className="ml-auto" navbar>
          <NavItem className="d-md-down-none">
            <NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
          </NavItem>
          <NavItem className="d-md-down-none">
            <NavLink to="#" className="nav-link"><i className="icon-list"></i></NavLink>
          </NavItem>
          <NavItem className="d-md-down-none">
            <NavLink to="#" className="nav-link"><i className="icon-location-pin"></i></NavLink>
          </NavItem>
          <UncontrolledDropdown nav direction="down">
            <DropdownToggle nav>
              <img src={users} className="img-avatar" alt={localStorage.getItem("Name")} width="50" height="40"/>
            </DropdownToggle>
            <DropdownMenu right>
              <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
              <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
              <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
              <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
              <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
              <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
              <DropdownItem divider />
              <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
              <DropdownItem onClick={this.onLogout}><i className="fa fa-lock"></i> Logout</DropdownItem>
            </DropdownMenu>
          </UncontrolledDropdown>
        </Nav>
        <AppAsideToggler className="d-md-down-none" />
        {/*<AppAsideToggler className="d-lg-none" mobile />*/}
      </React.Fragment>
    );
  }
}

DefaultHeader.propTypes = propTypes;
DefaultHeader.defaultProps = defaultProps;

export default DefaultHeader;

截图：-

Answer 1

您没有在 Rouutes.js 文件中创建历史记录，这就是 history.push() 不起作用的原因 在 Routes.js 中使用创建历史记录

import createHistory from 'history/createBrowserHistory'
export const history = createHistory();

并将其导入 App.js 并将其作为道具传递给 DefaultHeader

<DefaultLayout history={history}/>

它应该可以工作