react路由传参的几种方式

79 阅读1分钟

1.动态参数

<Route path="/Capacity/manage/craft/view/:Id"/>

const history = useHistory();
history.push({
	pathname: '/Capacity/manage/craft/view/' + '12121'
});
或者
history.push(
	'/Capacity/manage/craft/view/'+'105'
);

使用useParams可以获取
刷新不丢失

2.query传参

history.push({pathname:'/production',query:{productionId:120}})

使用location.query可以获取
刷新丢失

3.state

history.push({pathname:'/production',state:{productionId:120}})

使用location.state
刷新页面后参数丢失 参数不会在地址栏显示

4.search

history.push('/Capacity/manage/craft/view?a=1&b=2');

使用location.search
刷新不丢失 参数会在地址栏显示