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

xiaoxiao2021-02-28  7

本文出自:

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里面再找
转载请注明原文地址: https://www.6miu.com/read-450189.html

最新回复(0)