react-router Link 页面跳转(A->B)

1. props.parms

1.1 特点

• 类似于GET表单提交，在url中能看到参数
• 只能传字符串！

1.2 示例

1.2.1 配置路由

// 站点默认路由

// 即将跳转到的路由（注意，多了两个参数！）

1.2.2 Link超链接，准备跳转

// 或者

1.2.3 跳转完成，获取参数

const id = this.props.params.id;
const name = this.props.params.name;

2. query

2.1 特点

• 类似于GET表单提交，在url中能看到参数
• 可以传任何数据

2.2 示例

2.2.1 配置路由

// 站点默认路由

// 即将跳转到的路由

2.2.2 Link超链接，准备跳转

2.2.3 跳转完成，获取参数

const {id, name} = this.props.location.query;

3. state

3.1 特点

• 类似于POST表单提交，在url中看不到参数
• 可以传任何数据

3.2 示例

3.2.1 配置路由

// 站点默认路由

// 即将跳转到的路由

3.2.2 Link超链接，准备跳转

3.2.3 跳转完成，获取参数

const id = this.props.location.state.id;
const name = this.props.location.state.name;