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裏面再找