react路由的跳转和传参

Posted ggbondlearn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react路由的跳转和传参相关的知识,希望对你有一定的参考价值。

1、路由的跳转

一、DOM跳转

在需要跳转的页面导入import {Link} from ‘react-router-dom‘,在需要跳转的地方使用link标签的to属性进行跳转,路由配置文件中导出的那个类名相当于相当于router-view标签,在需要展示的地方引入这个类金星秀展示

1、在路由配置文件中配置路由

 

 
技术图片
 

2、在需要跳转的页面引入  import {Link} from ‘react-router-dom‘

3、使用link标签进行跳转

 
技术图片
 

 

4、在需要展示的区域进行展示

 

 
技术图片
 

 

二、js跳转

使用this.props.history.push(‘/child02‘)

 
技术图片
当点击事件触发时,调用函数,在函数中用js代码实现跳转

2、路由的传参

一、params传参

1、在路由配置中以/:的方式评接参数标识

 
技术图片
 

2、在路径后面将参数评接上(/参数)

 
技术图片
 

3、在被跳转页使用this.props.match.params.xxx(此处为id)    接收参数

 
技术图片
 

二、query传参

 
技术图片
 

1、在router文件中配置为正常配置   <Route path="/Child03" component={Child03}/>

2、在跳转时  路径为一个对象{}     其中 pathname为路径  query为一个对象  对象里是携带的参数

3、使用this.props.location.query接收参数

三、state传参

使用this.props.location.state接收参数

 
技术图片
 
 
技术图片


链接:https://www.jianshu.com/p/7ad7ab2745af
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以上是关于react路由的跳转和传参的主要内容,如果未能解决你的问题,请参考以下文章

umi路由跳转和传参

app之间的跳转和传参问题

uniapp 页面跳转和传参

Vue - 跳转和传参

Vue 路由引入和传参

老式Android中碎片Fragment之间的跳转和数据传递