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