• 技术文章 >web前端 >前端问答

    react跳转传值怎么实现

    藏色散人藏色散人2023-01-09 10:17:00原创81

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

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react跳转传值怎么实现?

    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

    4e241af3db0f1e3a55f64d9f69f8321.jpg

    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)
    f9689ee233d5bb3e07711c060218fb9.jpg

    推荐学习:《react视频教程

    以上就是react跳转传值怎么实现的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:vue组件怎么传值 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react跳转前记住页面状态怎么实现• react怎么实现文件上传• react 怎么实现删除功能• 深入聊聊vue3中的reactive()
    1/1

    PHP中文网