React路由跳转Link的使用

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 || {};