React路由跳转Link的使用

Starry_H2m

已于 2022-07-07 14:08:06 修改

阅读量4.6k

点赞数

分类专栏： React框架学习文章标签： react.js javascript 前端框架

于 2022-07-07 14:05:00 首次发布

本文链接：https://blog.csdn.net/H_Stary/article/details/125656461

版权

React框架学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Link标签的三种参数传递方式

1. params参数传递（使用target=“_blank”，参数传递成功，可以在新页面获取到值）

参数传递

// 参数传递
<Link target="_blank" to={`/link/devCode=${getUserInfo().devcode}/fileKey=${record.key}`}></Link>

注册路由，需要声明参数

// 注册路由，需要声明参数
{
    path: "/link/devCode=:devCode/fileKey=:fileKey",
    exact: true,
    component: SuperLink
}

参数接收

// 参数接收
const {devCode, fileKey} = this.props.match.params;

2. search参数传递（使用target=“_blank”，参数传递成功，可以在新页面获取到值）

参数传递

// 参数传递
<Link target="_blank" to={`/link?devCode=${getUserInfo().devcode}&fileKey=${record.key}`}></Link>

注册路由，无需声明参数

// 注册路由，无需声明参数
{
    path: "/link",
    exact: true,
    component: SuperLink
}

参数接收

// 参数接收
const{search} = this.props.location;
// console.log(this.props.location.search)；// ?devCode=5ac43b0dbe0e0aab455c183a7ca91fa5&fileKey=8895249
const {devCode, fileKey} = qs.parse(search.slice(1));
// console.log(qs.parse(search.slice(1))); // {devCode: '5ac43b0dbe0e0aab455c183a7ca91fa5', fileKey: '8895249'}

3. state参数传递（使用target=“_blank”，参数传递失败，无法在新页面获取到值；不使用target=“_blank”，参数传递成功）

参数传递

// 参数传递
<Link to={
	{
		pathname: '/link',
		state: {
			devCode: getUserInfo().devcode,
			fileKey: record.key
		}
	}
}></Link>

注册路由，无需声明参数

// 注册路由，无需声明参数
{
    path: "/link",
    exact: true,
    component: SuperLink
}

参数接收

// 参数接收
const {devCode, fileKey} = this.props.location.state || {};