1. params 方式

特点：参数只能是字符串，显示在地址栏上，刷新页面后参数不丢失

在组件中

1. 在路径后面以 / 的格式传参

使用 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>

2. 在路由规则 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 方式

特点：参数可以是对象，不显示在地址栏上，刷新页面后参数丢失

在组件中

1. 点击时传递实际参数

使用 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 模式，参数会丢失）

在组件中

1. 点击时传递实际参数

使用 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 方式

特点：对象参数需要转化，显示在地址栏上，刷新页面后参数不丢失

在组件中

1. 点击时传递实际参数

使用 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>
      </>
    );
  }
}