➢ 跳转路由
/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>