react-31-路由传参

2022-05-15 132

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

1. 前言

传参一直都是重点

一起梳理下有哪些路由传参的方式

本章节代码在react-路由配置基础上进行

2. 动态路由传参

2.1 易犯问题

2.2 易犯问题解决

上面这样写就匹配不到了该走404了

解决方案和vue也一样

:绑定变量

路由写法

<Route exact path="/search/:cityId" component={CitySearchComponet} />

2.3 跳转

通过 Link 跳转

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

<h1>城市列表</h1>
        {/* <p>  <Link to='/search/24'> 搜索--1. 动态路由</Link>  </p> */}
  {/* 不同的写法 */}
       <Link to={`/search/${cityId}`}> 搜索--</Link>

2.3 获取路由传值

界面的钩子函数 componentDidMount

this.props.match.params 得到参数

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

2.4 动态路由传参总结

使用起来简单,因为接收和传参都比较方便

正因为简单,所以传输复杂数据类型的时候就不方便

3. path路径传参

3.1 跳转代码

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

return (
            <div>
                <h1>城市列表</h1>
                <p>
                    <Link to='/search/123456'> 搜索 传参方式-1: 动态路由</Link>
                </p>
                <p>
                    <Link to='search/123?name=yzs&age=30'> 搜索 传参方式-2: path路径</Link>
                </p>
            </div>
        )

3.2 结果

3.3 获取参数

this.props.location.search获取字符串，再手动解析

简单的字符串分割 ,加上遍历转为对象就行

4. 隐式路由传参

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

4.1 跳转配置

<p>
                    <Link to={
                        {
                            pathname:"search/321",
                            state:{
                                name:"yzs",
                                age:30
                            }
                        }
                    }> 搜索 传参方式-3: 隐式 state</Link>
                </p>

4.2 结果

4.3 获取

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

在location里面通过state获取,

相比path路径传参方便的多

而且地址栏也不可见 ,所以是隐式的相对安全

最大缺点就是一刷新就没有了

5. 组件之间传参

组件之间传参需要改造路由

必须通过render渲染函数来写

5.1 改造路由

{...routeProps} 展开运算符

name='yzs' 典型的父子组件通过属性传参

import MyComponent from '../my' 
 <Route exact path="/search/:cityId" component={CitySearchComponet} />
                    <Route exact path="/my" render={
                        // 外层的{} 表示 变量 这是 react 的语法
                        (routeProps)=>{
                            // routeProps是路由传递的参数
                            return(
                                //  在原有路由组件参数的情况的下,增加新的参数
                                <MyComponent  {...routeProps}  name='yzs' age={30} />
                            )
                        }
                    } />

5.2 MyComponent 组件

pages/my/index.js

import React, { Component } from 'react'
export default class MyComponent extends Component {
    render() {
        console.log("我的界面:",this.props)
        return (
            <div>
                <h1>关于我的传说</h1>
            </div>
        )
    }
}

5.3 跳转配置

return (
            <div>
                <h1>城市列表</h1>
                <p>
                    <Link to='/search/123456'> 搜索 传参方式-1: 动态路由</Link>
                </p>
                <p>
                    <Link to='search/123?name=yzs&age=30'> 搜索 传参方式-2: path路径</Link>
                </p>
                <p>
                    <Link to={
                        {
                            pathname:"search/321",
                            state:{
                                name:"yzs",
                                age:30
                            }
                        }
                    }> 搜索 传参方式-3: 隐式 state</Link>
                </p>
                <p>
                    <Link to='my'> 搜索 传参方式-4: 组件间传值</Link>
                </p>
            </div>
        )

5.4 结果

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 (
        <div>
            {/* 1. 最简单的跳转  Link 对标 Vue的  router-link 也是渲染成[图片上传中...(1.png-8082c1-1629301696921-0)]
a标签 */}
            <h1>  <button onClick={()=>{
                props.history.goBack()
            }}> 返回</button>
              404 Not Found   <Link to="/">首页</Link>   </h1>
        </div>
    )
}

6.2 分析

${C3U_PYUTG(J`H4WA(KJ5N5.png$

1.函数式组件参数要写明 props

2.类组件的话需要写 this.props ,函数组件里面使用this不方便,所以是参数的形式传递的

3.里面也具备我们的路径传参数对应的 location

4.也有动态路由传参对应的 match

5.也有这个编程式导航的 history参数

react-31-路由传参

1. 前言

2. 动态路由传参

2.1 易犯问题

2.2 易犯问题解决

2.3 跳转

2.3 获取路由传值

2.4 动态路由传参总结

3. path路径传参

3.1 跳转代码

3.2 结果

3.3 获取参数

4. 隐式路由传参

4.1 跳转配置

4.2 结果

4.3 获取

5. 组件之间传参

5.1 改造路由

5.2 MyComponent 组件

5.3 跳转配置

5.4 结果

5.5 获取

6. 函数式组件接收参数

6.1 核心代码

6.2 分析

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

react-31-路由传参

1. 前言

2. 动态路由 传参

2.1 易犯问题

2.2 易犯问题解决

2.3 跳转

2.3 获取路由传值

2.4 动态路由传参总结

3. path路径传参

3.1 跳转代码

3.2 结果

3.3 获取参数

4. 隐式路由传参

4.1 跳转配置

4.2 结果

4.3 获取

5. 组件之间传参

5.1 改造路由

5.2 MyComponent 组件

5.3 跳转配置

5.4 结果

5.5 获取

6. 函数式组件接收参数

6.1 核心代码

6.2 分析

热门文章

最新文章

相关课程

相关电子书

2. 动态路由传参