1. params 方式
特点：参数只能是字符串，显示在地址栏上，刷新页面后参数不丢失
在组件中
- 在路径后面以 / 的格式传参
使用 Link 导航
<Link to={"/child2/100/小明"}>link: go to child1</Link>
或者 在函数组件中使用编程式导航
{/* 在函数组件中，需要使用 withRouter，使得组件参数 props 拥有 location、match、history 属性 */}
<button onClick={() => { props.history.push("/child2/100/小明")}}> onclick: go to child2 </button>
或者 在类组件中使用编程式导航
{/* 在类组件中，this.props 拥有 location、match、history 属性 */}
<button onClick={() => { this.props.history.push("/child2/100/小明")}}> onclick: go to child2 </button>
- 在路由规则 Route 的 path 中定义参数名称
<Route path="/child2/:id/:name" component={Child2} />
在路由组件中
通过 this.props.match.params 获取参数
import React, { Component } from "react";
export default class Child2 extends Component {
componentDidMount() {
const { id, name } = this.props.match.params;
console.log(id, name);
}
render() {
return <div>Child2</div>;
}
}
2. query 方式
特点：参数可以是对象，不显示在地址栏上，刷新页面后参数丢失
在组件中
- 点击时传递实际参数
使用 Link 导航
<Link to={{ pathname: "/child1", query: { id: 100, name: "xiaoming" } }}> onclick: go to child1 </Link>
或者 在函数组件中使用编程式导航
{/* 在函数组件中，需要使用 withRouter，使得组件参数 props 拥有 location、match、history 属性 */}
onClick={() => {props.history.push({pathname: "/child2",query: { id: 100, name: "xiaoming" }})}}
或者 在类组件中使用编程式导航
{/* 在类组件中，this.props 拥有 location、match、history 属性 */}
onClick={() => {this.props.history.push({pathname: "/child2",query: { id: 100, name: "xiaoming" }})}}
在路由组件中
通过 this.props.location.query 获取参数
import React, { Component } from "react";
export default class Child1 extends Component {
constructor(props) {
super(props);
this.state = {
id: "",
name: "",
};
}
componentDidMount() {
console.log(this.props);
if (this.props.location.query) {
const { id, name } = this.props.location.query;
this.setState({ id, name });
}
}
render() {
return (
<>
<div>Child1</div>
<div>
{this.state.id}
{this.state.name}
</div>
</>
);
}
}
3. state 方式
特点：参数可以是对象，不显示在地址栏上，刷新页面后参数不丢失（HashRouter 模式，参数会丢失）
在组件中
- 点击时传递实际参数
使用 Link 导航
<Link to={{ pathname: "/child1", state: { id: 100, name: "xiaoming" } }}> onclick: go to child1 </Link>
或者 在函数组件中使用编程式导航
{/* 在函数组件中，需要使用 withRouter，使得组件参数 props 拥有 location、match、history 属性 */}
onClick={() => {props.history.push({pathname: "/child2",state: { id: 100, name: "xiaoming" }})}}
或者 在类组件中使用编程式导航
{/* 在类组件中，this.props 拥有 location、match、history 属性 */}
onClick={() => {this.props.history.push({pathname: "/child2",state: { id: 100, name: "xiaoming" }})}}
在路由组件中
通过 this.props.location.state 获取参数
import React, { Component } from "react";
export default class Child1 extends Component {
constructor(props) {
super(props);
this.state = {
id: "",
name: "",
};
}
componentDidMount() {
console.log(this.props);
if (this.props.location.state) {
const { id, name } = this.props.location.state;
this.setState({ id, name });
}
}
render() {
return (
<>
<div>Child1</div>
<div>
{this.state.id}
{this.state.name}
</div>
</>
);
}
}
4. search 方式
特点：对象参数需要转化，显示在地址栏上，刷新页面后参数不丢失
在组件中
- 点击时传递实际参数
使用 Link 导航
<Link to={{ pathname: "/child1", search: "?id=100&name=小明" }}> onclick: go to child1 </Link>
或者 在函数组件中使用编程式导航
{/* 在函数组件中，需要使用 withRouter，使得组件参数 props 拥有 location、match、history 属性 */}
onClick={() => {props.history.push({pathname: "/child2",search: "?id=100&name=小明"})}}
或者 在类组件中使用编程式导航
{/* 在类组件中，this.props 拥有 location、match、history 属性 */}
onClick={() => {this.props.history.push({pathname: "/child2",search: "?id=100&name=小明"})}}
在路由组件中
通过 this.props.location.search 获取参数，获取到参数后需要处理转化
import React, { Component } from "react";
// 如果没有 querystring 模块,需要下载： npm install querystring -S
import qs from "querystring";
export default class Child1 extends Component {
constructor(props) {
super(props);
this.state = {
id: "",
name: "",
};
}
componentDidMount() {
if (this.props.location.search) {
const { id, name } = qs.parse(this.props.location.search.slice(1));
this.setState({ id, name });
}
}
render() {
return (
<>
<div>Child1</div>
<div>
{this.state.id}
{this.state.name}
</div>
</>
);
}
}
