React Js Router 静态方法跳转 直接点到组件

本文出自：

http://blog.csdn.net/wyk304443164

我们先看看原始的写法：

import {hashHistory} from 'react-router';

class GoodsInfo extends BaseComponent {
    startBuy = ()=> {
        let path = `/shopping_flow?id=${id}&tid=${tid}&buytype=${buytype}&buyNumber=${buyNumber}`;

        hashHistory.push(path);
    }
}

export default GoodsInfo;

修改后：

/** * Created by wuyakun on 2017/4/27. */
import React from 'react';
import BaseComponent from './../../common/BaseComponent';
import ShoppingFlow from "../../components/user/ShoppingFlow";

class GoodsInfo extends BaseComponent {
    startBuy = () => {
        let linkObj = {
            id: this.state.id,
            tid: this.state.tid ? this.state.tid : '',
            buytype: this.state.isOnly ? 'alone_buy' : 'group_buy',
            buyNumber: this.state.buyNumber,
        };
        ShoppingFlow.linkToShoppingFlow(linkObj);
    };
}

export default GoodsInfo;

ShoppingFlow 内静态方法：

static linkToShoppingFlow(linkObj) {
    // id tid buytype buyNumber
    let path = `/shopping_flow${common.formatGetData(linkObj)}`;
    hashHistory.push(path);
}

• 此时所有的路由都可以修改为这种方式。其实这种写法在js上面优势不是很大，但是可以稍微节约点可怜的代码量，其实最大的好处是能让跳转者知道我需要什么参数，想法来自 Android 目标 Activity 内写静态启动方法。
• 另外有一个好处就是，跳转的地方写静态，就可以 ctrl + 左键直接跳转到该组件，不用router里面再找