react跳转路由报错Cannot read property ‘push’ of undefined

原文链接: https://dsx2016.com/?p=470

➢ 跳转路由

/path是要跳转的路径

this.props.history.push(`/path`);

➢ error

当点击跳转的时候,控制台报错

Cannot read property 'push' of undefined

➢ 问题

本次遇到的问题是在首页home点击子组件bottomBar的时候,报错了

但是单独把子组件bottomBar在路由打开时,却是可以点击跳转的

问题就出在父子组件上,在父组件调用子组件定义的跳转事件时,要传递history

父组件

<BottomBar
    history={this.props.history}
/>

子组件

<div
    onClick={()=>{
        this.props.history.push(`/path`);
    }}
>
    child
</div>

➢ react-router-dom

在app.js,定义路由的地方

注意是BrowserRouter还是HashRouter

// 引入路由
import { BrowserRouter as Router, Route } from "react-router-dom";
​
<Router>
     {/* 首页路由 */}
     <Route exact path="/" component={Home} />
     {/* 我的页面路由 */}
     <Route exact path="/mine" component={Mine} />
     {/* 商城路由 */}
     <Route exact path="/shop" component={Shop} />
</Router>