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