阿里Ice中实现组件和页面间跳转并进行参数传递

阿里Ice中组件跳转的几种方式

阿里的飞冰（ice）是对React的封装实现，提供了便捷的React开发模式和最佳实践。在最近对Ice的学习和使用过程中需要使用到组件间和页面之间的跳转功能。目前Ice中可以使用如下几种不同的方式来实现组件或页面之间的跳转功能。

• 使用<Link />标签进行组件跳转。
• 使用withRouter在组件内方法中实现页面跳转。
• 使用history API在单独方法内实现页面跳转。
• 使用hashHistory进行页面跳转。

Link实现组件跳转

引入Link组件：

import {Link} from "react-router-dom";

Link标签实现组件的跳转（不带参数）：

{/* 直接跳转到route.js中该path匹配的组件 */}
<Link to="/courses" />

使用Link实现带参数的组件跳转：

import { Link } from 'react-router-dom';
class Demo extends React.Component {
  render() {
    return (
      <div>
        {/* 跳转到组件 */}
        <Link to="/courses?sort=name" />
        {/* 可以携带额外的数据 `state` 到路由中。 */}
        <Link
          to={{
            pathname: '/courses',
            search: '?sort=name',
            hash: '#the-hash',
            state: { key: value },
          }}
        />
      </div>
    )
  }
}

在使用第二个link跳转组件时，可以在state中设置需要传递的参数{key: value}，然后在跳转的目标组件中使用如下的方式进行获取传递的参数：

componentDidMount(){
    // console.log(this.props.location)//传递过来的所有参数
    console.log(this.props.location.state.key) // 输出为val
}

或者使用 

link标签的具体使用可以参考：https://reacttraining.com/react-router/web/api/Link 

withRouter实现页面跳转并传参

如果调用方法的地方在 React 组件内部，可以直接在组件上添加 withRouter 的装饰器，然后在需要实现跳转的页面中进行如下的设置，来实现带参数的跳转。

例如下面从OriginPage跳转到DestinationPage，并携带param参数的页面跳转设置如下：

import React from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

@withRouter
class OriginPage extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  handleHistoryPush = () => {
    const { history } = this.props;
    history.push({
      pathname: '/destinationPage', // 待跳转的页面URL
      state: { param },             // 跳转时传入的参数
    });
  };

  render() {
    const { location } = this.props;
    return (
      <div>
        <div>当前路径： {location.pathname}</div>
        <button onClick={this.handleHistoryPush}>点击跳转新页面</button>
      </div>
    );
  }
}

在跳转后的DestinationPage页面中也需要下面相同的设置：

import React from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

@withRouter
class DestinationPage extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  componentDidMount() {
    let id = this.props.location.state.param;
    console.log("param: " + param);
  }
  
  ...
}

在目标页面使用如下的方式来获取页面跳转时传入的参数：

// 获取页面跳转传递的所有参数
let params = this.props.location;

// 获取页面跳转时，放在state中名为param的参数
let param = this.props.locatioin.state.param;

history API

如果不满足第一种方法的使用条件，比如单独抽离的某个方法中，则需要单独使用 history 的三方包。（不常见的使用情况）

添加history的依赖：

$ npm install --save history

使用history API：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default function checkAuth() {
  ajax('/api/checkAuth').then((res) => {
    if (res.data.noAuth) {
      history.push('/page/noAuth');
    }
  });
};

使用hashHistory

引入依赖：

import {hashHistory} from ‘react-router’;

点击跳转方法进行页面跳转并携带参数：

    handleClick = (user) => {
        hashHistory.push({
            pathname: '/user/detail',
            query: {
                id: user.id,
                username: user.userName,
                sex: user.sex
            },
        })
    }

在跳转后的页面取出参数时使用：

let id = this.props.location.query.id;
let username = this.props.location.query.username;
let sex = this.props.location.query.sex;