由于此时的history需要父组件提供,因此在调用子组件时,父组件需进行传参:
<FlexBar navs={navs} history={this.props.history} />
同时子组件通过props.history.push(path)即可实现跳转:
<Flex className="nav">
{props.navs.map(item => (
<Flex.Item
key={item.id}
onClick={() => props.history.push(item.path)}
>
<img src={item.img} alt='' />
<h2>{item.title}</h2>
</Flex.Item>
))
}
</Flex >