路由传参# react-router 路由跳转传参的三种方式
# 1. params传参
优点：刷新页面，参数不丢失
缺点：1.只能传字符串，传值过多url会变得很长 2. 参数必须在路由上配置
# 路由配置
{ path: '/detail/:id/:name', component: Detail },
1
# 路由跳转与获取路由参数
import { useHistory,useParams } from 'react-router-dom';
const history = useHistory();
// 跳转路由 地址栏：/detail/2/zora
history.push('/detail/2/zora')
// 获取路由参数
const params = useParams()
console.log(params) // {id: "2",name:"zora"}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. search传参
优点：刷新页面，参数不丢失
缺点：只能传字符串，传值过多url会变得很长，获取参数需要自定义hooks
# 路由配置
{ path: '/detail', component: Detail },
1
# 路由跳转与获取路由参数
import { useHistory } from 'react-router-dom';
const history = useHistory();
// 路由跳转 地址栏：/detail?id=2
history.push('/detail?id=2')
// 或者
history.push({pathname:'/detail',search:'?id=2'})
/**
* 自定义hooks用于获取路由参数
* IE11及以下浏览器 不支持浏览器内置的URLSearchParams API
**/
function useQuery() {
return new URLSearchParams(useLocation().search);
}
const query = useQuery()
const id = query.get('id') //2
/**
自定义hooks
*/
import { useLocation } from 'react-router-dom';
import qs from 'query-string';
export function useQuery<T = any>(): T {
const { search } = useLocation();
return (qs.parse(search) as unknown) as T;
}
const query = useQuery<IRouteQuery>();
const {id} = query
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 3. state传参🙌
优点：可以传对象
缺点： <HashRouter>刷新页面，参数丢失
# 路由配置
{ path: '/detail', component: Detail },
1
# 路由跳转与获取路由参数
import { useHistory,useLocation } from 'react-router-dom';
const history = useHistory();
const item = {id:1,name:"zora"}
// 路由跳转
history.push(`/user/role/detail`, { id: item });
// 参数获取
const {state} = useLocation()
console.log(state) // {id:1,name:"zora"}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
笔记
<HashRouter> 不支持 location.key 与 location.state，<HashRouter>通过state传递参数，刷新页面后参数丢失，官方建议使用<BrowserRouter>，<BrowserRouter>页面刷新参数也不会丢失。