react跳转传值如何实现

本篇内容主要讲解“react跳转传值如何实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react跳转传值如何实现”吧!

吉林网站建设公司创新互联建站,吉林网站设计制作，有大型网站制作公司丰富经验。已为吉林成百上千提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的吉林做网站的公司定做！

react跳转传值的实现方法：1、通过“history.push”或“NavLink”实现页面跳转；2、通过“this.props.history.push({pathname: 'login',query: {id: ...,name: ...}})this.props.history.push('modify')”实现传值即可。

react项目页面跳转/传值

一、跳转

1、history.push 跳转

• 引用 withRouter

• 导出组件时使用

import { withRouter } from 'react-router-dom'；

class Header extends React.Component {

}
export default withRouter(Header);

2、NavLink跳转

import { NavLink } from "react-router-dom";
修改密码

二、传值

1、路由传值 query/params

this.props.history.push({
   pathname: 'login',
   query: {
       id: 3231,
       name: 3231
   }})this.props.history.push('modify')

2、路由传值获取参数

this.props.match.query.id // 3231
this.props.match.params.name // 3231

3、props传值

父组件:

state = {
   collapsed: false,};render() {
   const { collapsed } = this.state;
   return (
       
   )}

子组件:

componentDidMount(){
   // console.log(this.props)
   const { pathname } = this.props.location    if( pathname ) {
       this.setState({              
           selectedKeys:this.props.location.pathname        })
   }}

console.log(this.props)

到此，相信大家对“react跳转传值如何实现”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！