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
}

 

瀏覽器支持情況如下

 

2021.04.08 更新 

發現了個小 bug，encodeQuery 中未考慮特殊字符，修改如 11 行標紅處

// 傳參編碼
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 encodeURI(queryStr) 12 }

 

 

 

 END~~~≥ω≤