“Cannot read property ‘push‘ of undefined”问题的解决方法

最新推荐文章于 2025-06-29 17:25:58 发布

原创最新推荐文章于 2025-06-29 17:25:58 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react-router 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在React应用中遇到'Cannot read property 'push' of undefined'错误的原因及解决方法。通过调整路由配置，将component属性设置为引入的组件对象，避免了该错误的发生，确保路由的正常工作。

app.jsx内容如下

import React, { Component } from 'react'

import AddPerson from './containers/AddPerson'
import ShowPerson from './containers/ShowPerson'
import EditPerson from './containers/EditPerson'
import { Route, Redirect, Switch } from 'react-router'
import { routes } from './routes'
import './app.less'


export default class App extends Component {
	render() {
		return (
			<div>
				<Switch>
					{
						routes.map((obj) => {
							console.log(obj.component);
							return (
								<Route key={obj.name} path={obj.path} component={obj.component}></Route>
							)
						})
					}
					<Redirect from='/' to='/show' component={ShowPerson} />
				</Switch>
			</div>
		)
	}
}

routes路由的内容如下
（为了进行路由拆分，单独使用routes/index.jsx进行路由路径处理）

import AddPerson from '../containers/AddPerson'
import EditPerson from '../containers/EditPerson'
import ShowPerson from '../containers/ShowPerson'
import React from 'react'

export  const routes = [
    {
        name: '/show',
        path:'/show',
        component: <ShowPerson/>
    },
    {
        name: '/add',
        path:'/add',
        component:<AddPerson/>
    },
    {
        name: '/edit',
        path:'/edit',
        component: <EditPerson/>
    }
]

报错图片
出现当前的报错
将routes/index.jsx改为如下

import AddPerson from '../containers/AddPerson'
import EditPerson from '../containers/EditPerson'
import ShowPerson from '../containers/ShowPerson'
import React from 'react'

export  const routes = [
    {
        name: '/show',
        path:'/show',
        component: ShowPerson
    },
    {
        name: '/add',
        path:'/add',
        component:AddPerson
    },
    {
        name: '/edit',
        path:'/edit',
        component: EditPerson
    }
]