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;