react-router 页面跳转

props.match.params

此种方式，参数会显示在 url地址栏 上。

地址形式为 / 连接的形式。

1. 路由写法

   多个参数，以 / 分割， ? 代表非必填, * 代表所有.

   <Route path="/a/:data1/:data2?" component={a}/>
   
   //或者所有参数拼接成一个参数，可以用特殊字段隔开，目的页面解析参数即可。
   //避免出现 / 的转义问题
   <Route path="/a/:data*" component={a}/>

2. 跳转写法

   注意需要对参数编码，若参数中含有 / ，不编码导致多个参数截取错误

   //link组件
   <Link to={"/a/" + encodeURIComponent(data1) + "/" + encodeURIComponent(data2)}></Link>
   
   //history
   this.props.history.push(path)

3. 取值

   console.log(this.props.match.params);
   //为对象，可以获取参数，注意转义

search

此种写法页面跳转参数在url上，且为 ?data1=1&data2=2 的形式。

1. 路由写法

   <Route path="/a" component={a}/>

2. 跳转写法

   //link组件
   <Link to={{
       pathname: "/courses",
       search: "?sort=name&hha=aa",
    }}
   />
   
   //history
   this.props.history.push(path)

3. 取值

   console.log(this.props.location.search);
   //输出的值为一个字符串，不能区分出参数，需要自己解析处理参数

state

此种写法页面跳转参数不在url上, 类似 post 提交。

1. 路由写法

   <Route path="/a" component={a}/>

2. 跳转写法

   //link组件
   <Link to={{
       pathname: "/courses",
       state: {
         data1: 1,
         data2: 2
       },
    }}
   />
   
   //history
   this.props.history.push(path)

3. 取值

   console.log(this.props.location.state);
   //为对象，可以获取参数

注意

页面重定向，直接传 location 对象，而不是 location.pathName, 否则造成参数丢失

this.props.history.push(this.props.history.location)