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";
<NavLink to="/modify">修改密码</NavLink>

二、传值

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 (
        <Slider collapsed={collapsed}/>
    )}

子组件:

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

console.log(this.props)

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