react-31-路由传参

1. 前言

传参一直都是重点
一起梳理下 有哪些路由传参的方式
本章节代码在react-路由配置基础上进行

---

2. 动态路由 传参

2.1 易犯问题

1.png

---

2.2 易犯问题解决

上面这样写就匹配不到了 该走404了
解决方案 和vue也一样
:绑定变量
路由写法

---

2.3 跳转

通过 Link 跳转
我这里为了测试,其实这个跳转是写在 城市界面的

        
城市列表
               
        {/* 
   搜索--1. 动态路由  
 */}
  {/* 不同的写法 */}
        搜索--
                

---

2.3 获取路由传值

界面的 钩子函数 componentDidMount

1.png

this.props.match.params 得到参数

       let {cityId} = this.props.match.params

---

2.4 动态路由传参总结

1. 使用起来简单,因为接收和传参都比较方便
2. 正因为简单,所以传输复杂数据类型的时候 就不方便

---

3. path路径传参

3.1 跳转代码

就是路径拼接 地址栏 ? 后面的形式

   return (
            

                
城市列表
                

                     搜索 传参方式-1: 动态路由
                
                

                     搜索 传参方式-2: path路径
                

            
        )

---

3.2 结果

1.png

---

3.3 获取参数

this.props.location.search获取字符串，再手动解析
简单的字符串分割 ,加上遍历 转为对象就行

---

4. 隐式路由传参

其实仔细观察上个截图,发现里面有个state属性

4.1 跳转配置

 

                     搜索 传参方式-3: 隐式 state
                

---

4.2 结果

1.png

---

---

4.3 获取

let {name ,age} = this.props.location.state

在location里面 通过state获取,
相比path路径传参 方便的多
而且地址栏也不可见 ,所以是隐式的相对安全
最大缺点 就是 一刷新 就没有了

---

5. 组件之间传参

组件之间传参需要改造路由
必须通过render渲染函数来写

5.1 改造路由

{...routeProps} 展开运算符
name='yzs' 典型的 父子组件通过 属性传参

import MyComponent from '../my' 



 
                    {
                            // routeProps是路由传递的参数
                            return(
                                //  在原有路由组件参数的情况的下,增加新的参数
                                
                            )
                        }
                    } />

---

5.2 MyComponent 组件

pages/my/index.js

import React, { Component } from 'react'

export default class MyComponent extends Component {
    render() {
        console.log("我的界面:",this.props)
        return (
            

                
关于我的传说
            
        )
    }
}

---

5.3 跳转配置

return (
            

                
城市列表
                

                     搜索 传参方式-1: 动态路由
                
                

                     搜索 传参方式-2: path路径
                
                

                     搜索 传参方式-3: 隐式 state
                
                

                     搜索 传参方式-4: 组件间传值
                
            
        )

---

5.4 结果

1.png

---

5.5 获取

 console.log("我的",this.props)
        //直接就可以解构出来
        let {name,age} = this.props

这种方式 传参 略嫌麻烦,但是接收参数非常方便,
不影响路由组件自带参数,用户也看不到,综合了上述的优点

---

6. 函数式组件接收参数

6.1 核心代码

import React from 'react'
import {Link} from 'react-router-dom'
export default function index(props) {
    console.log("函数式组件",props)
    return (
        

            
            {/* 1. 最简单的跳转  Link 对标 Vue的  router-link 也是渲染成[图片上传中...(1.png-8082c1-1629301696921-0)]
a标签 */}
            
  {
                props.history.goBack()
            }}> 返回
              404 Not Found   首页   
        
    )
}

---

6.2 分析

1.png

---

1.函数式组件参数要 写明 props
2.类组件的话 需要写 this.props ,函数组件里面使用this不方便,所以是参数的形式传递的
3.里面也具备 我们的 路径传参数对应的 location
4.也有 动态路由传参 对应的 match
5.也有这个编程式导航的 history参数

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉