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

1. props.parms

1.1 特点

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

1.2 示例

1.2.1 配置路由

// 站点默认路由
<IndexRoute component={AppDownloadPage}/>
// 即将跳转到的路由（注意，多了两个参数！）
<Route path="helloWorld/:id/:name" component={HelloWorldPage}/>

1.2.2 Link超链接，准备跳转

<Link to={`/statics/helloWorld/${id}/${appName}`}>
// 或者
<Link to={{pathname: `/statics/helloWorld/${id}/${appName}`}}>

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 配置路由

// 站点默认路由
<IndexRoute component={AppDownloadPage}/>
// 即将跳转到的路由
<Route path="helloWorld" component={HelloWorldPage}/>

2.2.2 Link超链接，准备跳转

<Link to={{pathname: `/statics/helloWorld`, query: {id: id, name: appName}}}>

2.2.3 跳转完成，获取参数

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

3. state

3.1 特点

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

3.2 示例

3.2.1 配置路由

// 站点默认路由
<IndexRoute component={AppDownloadPage}/>
// 即将跳转到的路由
<Route path="helloWorld" component={HelloWorldPage}/>

3.2.2 Link超链接，准备跳转

<Link to={{pathname: `/statics/helloWorld`, state: {id: id, name: appName}}}>

3.2.3 跳转完成，获取参数

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