zoukankan      html  css  js  c++  java
  • react-router-dom(版本5.1.2)URL传参

    本文地址:https://www.cnblogs.com/veinyin/p/12106278.html

    路由跳转带参是一个非常常见的需求,有时需要携带好几个参数跳转,此时就不能使用 path/?:id 这种方式了

    查看文档说用 state 传对象,但是有个问题是一刷新就完,想要像 vue 那样传 query,跳转地址变成 path?a=a&b=b 该怎么写呢?

    之前版本似乎可以用 query 传参,然而我上车的是 5.x 版本,下面是支持传递的参数

    嗯 有个 search 参数,看看怎么用

    嗯? 字符串? 试了一下会拼接在 Path 后面,跟query 差不多

    跳转处写的 

    <Link
        to={{
            pathname: '/path',
            search: 'id=1'
        }}
    >       
        Link
    </Link>                   

      

    地址栏显示的,这样刷新页面也没问题啦

    /path?id=1

      

    获取参数

    props.location.search  
    // ?id=1

    解决方案:

    传参使用 search,自定义方法将对象转为字符串,接收参数使用 props.location.search,自定义方法将字符串转为对象

    // 传参编码
    function encodeQuery(query: { [key: string]: any }): string {
        let queryStr = ''
        let keys = Object.keys(query)
        // a=1&b=2
        keys.forEach((item, index) => {
            queryStr = index
                ? `${queryStr}&${item}=${query[item]}`
                : `${queryStr}${item}=${query[item]}`
        })
        return queryStr
    }
    
    // 接收解码
    function decodeQuery(queryStr: string): any {
        let query: { [key: string]: any } = {}
        // 中文需解码
        queryStr = decodeURI(queryStr.replace('?', ''))
        let queryArr = queryStr.split('&')
        queryArr.forEach(item => {
            let keyAndValue = item.split('=')
            query[keyAndValue[0]] = keyAndValue[1]
        })
        return query
    }

      

    使用示例

    <Link
        to={{
            pathname: '/path',
            search: encodeQuery({
                id: 1,
                name: 'yin yuhui',
            }),
        }}
    >
        <Button type="link">Link</Button>
    </Link>
    const { id, name } = decodeQuery(props.location.search) 
    // id=1, name='yin yuhui'

    2020.01.06 更新 

    decodeQuery 可使用 Object.formEntries() 优化,Chrome 79 版本支持

    function decodeQuery(queryStr: string): any {
        let query: { [key: string]: any } = {}
        queryStr = decodeURI(queryStr.replace('?', ''))
        query = Object.fromEntries(new URLSearchParams(queryStr))
        return query
    }

    浏览器支持情况如下

     END~~~≥ω≤

  • 相关阅读:
    codeforces 814B An express train to reveries
    codeforces 814A An abandoned sentiment from past
    codeforces 785D D. Anton and School
    codeforces 785C Anton and Fairy Tale
    codeforces 791C Bear and Different Names
    AOP详解
    Spring集成JUnit测试
    Spring整合web开发
    IOC装配Bean(注解方式)
    IOC装配Bean(XML方式)
  • 原文地址:https://www.cnblogs.com/veinyin/p/12106278.html
Copyright © 2011-2022 走看看