本文出自:
我们先看看原始的写法:
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里面再找