react-router-dom（版本5.1.2）URL传参

  • Z时代
  • 2024-01-10
  • 分类：综合

react

本文地址：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
}

浏览器支持情况如下

2021.04.08 更新 

发现了个小 bug，encodeQuery 中未考虑特殊字符，修改如 11 行标红处

 1 // 传参编码
 2 function encodeQuery(query: { [key: string]: any }): string {
 3     let queryStr = ''
 4     let keys = Object.keys(query)
 5     // a=1&b=2
 6     keys.forEach((item, index) => {
 7         queryStr = index
 8             ? `${queryStr}&${item}=${query[item]}`
 9             : `${queryStr}${item}=${query[item]}`
10     })
11     return encodeURI(queryStr)
12 }

 END~~~≥ω≤

以上是 react-router-dom（版本5.1.2）URL传参 的全部内容， 来源链接： utcz.com/z/384409.html

回到顶部