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~~~≥ω≤