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>

原文地址:https://www.cnblogs.com/tylz/p/11994482.html

时间: 2024-08-30 01:26:46

React 子组件进行路由跳转的相关文章

React子组件和父组件通信

React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从下面这个例子来详细了解: 1 var Father=React.createClass({ 2 getDefaultProps:function(){ 3 return { 4 name:"父组件" 5 } 6 }, 7 MakeMoney:function(){ // 挣钱,供子组件调用

React子组件向父组件传值

class Child extends React.Component{ constructor(props){ super(props); this.state={child:"我是子组件的值"}; this.props.getChild(this.state.child); } render(){ return(<div> 我是子组件 </div>) } } class Parent extends React.Component{ constructor(

react 子组件向父组件传值

//子组件 this.props.handle(num); //父组件 handle=(num)=>{ this.setState({ num:num }) } <子组件 handle={this.handle} > 原文地址:https://www.cnblogs.com/orzzt/p/9835409.html

react 子组件访问父组件的方法

回调函数(推荐) 地址:https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react 获得父组件的实例(不推荐) var parent = this._reactInternalInstance._currentElement._owner._instance; 地址:https://stackoverflow.com/questions/34257665/i

react 父组件向子组件传递函数

这段时间一直在使用react,由于这react是单向数据绑定,总感觉有点不适用,毕竟之前一直都在使用angular,但学习还是要继续,做了一个迭代的项目,都差点忘记要总结一下这个react了,现在可以写点东西了.(react 新手,仅仅参考) 1.react一开始我更理解为是一个各种代码片段,由于之前接触了一段时间meteor,感觉有点相似.在使用之前都要在app.js中将一总的父组件通过import导入,另外在route中的path中写入链接 例如:import createHistory f

react做路由跳转,路由传参 &#340936;

原文: http://blog.gqylpy.com/gqy/496 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

vue 和react中子组件分别如何向父组件传值

vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='postData'>向父组件传值:点击我</p>{{result?'开':'关'}}</div>`, props:["result"], data(){ return{ message:'从子组件传过来的数据' } }, methods:{ postData(){

链接进入react二级路由,引发的子组件二次挂载

这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理,没有理由有的可以,有的不可以,程序是死的,所以我断定出现这种差异,是因为代码有bug了.那么问题来了,怎么定位这个问题? 关于定位这个问题,这次吃了个大亏,说一下思路和过程吧. 第一症状是这样的,链接进入二级路由,会发出两个相同的网络请求,这个请求是放在 componentDidMount 生命周

vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)

模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择,history 和 hash,大致对比一下, 模式 优点 缺点 hash 使用简单.无需后台支持 在url中以hash形式存在,不会传到后台 history 地址明确,便于理解和后台处理