react路由跳转失效原因

Posted 2023-05-07

参考技术A 问题：
在home页面点击跳转到详情页面，结果导航栏地址改变，项目页面丝毫没有变化
解决：
还是对react学习不够深刻，在LInk标签外部我又包了一层<Router>。。是我的锅！！！

React 子组件进行路由跳转

react路由跳转：

1.DOM跳转

<Link href={`/device/list`} to={`/device/add`}></Link>

2.js跳转

this.props.history.push("/device/add")

 

具体路由跳转细节，请自行百度

 

问题：

父组件：

<TabPane tab="终端配置" key="1">

<A/>

</TabPane>

<TabPane tab="车场与出入口" key="2">

<B />

</TabPane>

 

在子组件里，直接使用js完成路由跳转

错误信息：push方法未定义

 

解决法案：

<TabPane tab="终端配置" key="1">

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

</TabPane>

<TabPane tab="车场与出入口" key="2">

<B />

</TabPane>