react-router-dom（版本5.1.2）URL傳參

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

路由跳轉帶參是一個很是常見的需求，有時須要攜帶好幾個參數跳轉，此時就不能使用 path/?:id 這種方式了vue

查看文檔說用 state 傳對象，可是有個問題是一刷新就完，想要像 vue 那樣傳 query，跳轉地址變成 path?a=a&b=b 該怎麼寫呢？瀏覽器

以前版本彷佛能夠用 query 傳參，然而我上車的是 5.x 版本，下面是支持傳遞的參數優化

嗯有個 search 參數，看看怎麼用ui

嗯？字符串? 試了一下會拼接在 Path 後面，跟query 差很少編碼

跳轉處寫的 spa

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

地址欄顯示的，這樣刷新頁面也沒問題啦code

/path?id=1

獲取參數orm

props.location.search // ?id=1

解決方案：htm

傳參使用 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~~~≥ω≤