提交 fc2d0cb3 authored 作者: vipcxj's avatar vipcxj

improve: 增加相对路径路由跳转的相关辅助函数。

上级 3f4bd2a7
......@@ -20,6 +20,7 @@
"co": "^4.6.0",
"dva": "^1.2.1",
"dva-loading": "^0.2.1",
"fastjson_ref_resolver": "latest",
"jsencrypt": "^2.3.1",
"lodash": "^4.17.4",
"lodash-deep": "^2.0.0",
......@@ -29,10 +30,10 @@
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-sizeme": "^2.3.4",
"resolve-pathname": "^2.1.0",
"uuid": "^3.1.0",
"word-wrap": "^1.2.3",
"xml2js": "^0.4.17",
"fastjson_ref_resolver": "latest"
"xml2js": "^0.4.17"
},
"devDependencies": {
"@storybook/react": "^3.1.7",
......
import React from 'react';
import PropTypes from 'prop-types';
class Detail extends React.Component {
render() {
const { state } = this.props.location;
console.log(state);
return (
<div>List</div>
);
......@@ -11,8 +12,4 @@ class Detail extends React.Component {
}
Detail.propTypes = {
task: PropTypes.object.isRequired,
};
export default Detail;
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import List from './list';
import Detail from './detail';
import route from '../../../../utils/hoc/routes';
import route from '../../../../components/hoc/routes';
export default connect(({ task }) => ({ task }))(route({
childRoutes: [
{
path: 'list',
name: '列表',
component: List,
component: withRouter(List, { withRef: true }),
},
{
path: 'detail',
name: '详细',
component: Detail,
component: withRouter(Detail, { withRef: true }),
},
],
}));
import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Button } from 'antd';
import { connect } from 'dva';
import TableEx from '../../../../components/table/index';
import config from '../../../../utils/config';
import { push } from '../../../../utils/navigate';
import styles from './list.less';
const columns = [{
......@@ -90,8 +92,7 @@ class List extends React.Component {
getCurrent() {
const { num } = this.props.task;
const pageNum = ((num / this.state.pageSize) | 0) + 1;
const current = this.state.current > pageNum ? pageNum : this.state.current;
return current;
return this.state.current > pageNum ? pageNum : this.state.current;
}
loadData() {
const filters0 = this.state.filters
......@@ -136,6 +137,7 @@ class List extends React.Component {
return (
<div className={styles.wrapper}>
<div className={styles.container}>
<Button onClick={() => { push(this, { pathname: '../detail', state: { a: 1, b: 2, c: 3 } }); }}>detail</Button>
<TableEx {...tableProps} />
</div>
</div>
......
import _ from 'lodash';
import resolvePathname from 'resolve-pathname';
export function getMenuItems(menus, keyPath) {
if (!_.isArray(keyPath)) {
throw new Error('keyPath must be array');
export function makePath(base, path) {
if (path.startsWith('/')) {
return path;
}
if (keyPath) {
const [first, ...rest] = keyPath;
const subMenus = _.find(menus, ['name', first]);
if (subMenus) {
if (rest) {
return [subMenus, ...getMenuItems(subMenus.children, rest)];
} else {
return [subMenus];
}
}
const basePath = base.endsWith('/') ? base : `${base}/`;
return resolvePathname(path, basePath);
}
const checkThis = (theThis) => {
if (!theThis || !theThis.props) {
throw new Error('The this is not a component.');
}
if (!theThis.props.router) {
throw new Error('please use withRouter.');
}
};
const getBase = (theThis) => {
if (theThis.props.location) {
return theThis.props.location.pathname;
} else if (typeof window !== 'undefined') {
return window.location.pathname; // eslint-disable-line no-undef
} else {
throw new Error('can not find base path!');
}
};
const dealWithRoute = (theThis, route) => {
const base = getBase(theThis);
if (_.isString(route)) {
return makePath(base, route);
} else if (route && route.pathname) {
return {
...route,
pathname: makePath(base, route.pathname),
};
} else {
throw new Error('invalid route');
}
return [];
};
export function push(theThis, pathOrLoc) {
checkThis(theThis);
const route = dealWithRoute(theThis, pathOrLoc);
return theThis.props.router.push(route);
}
export function replace(theThis, pathOrLoc) {
checkThis(theThis);
const route = dealWithRoute(theThis, pathOrLoc);
return theThis.props.router.replace(route);
}
export function go(theThis, n) {
checkThis(theThis);
return theThis.props.router.go(n);
}
export function goBack(theThis) {
checkThis(theThis);
return theThis.props.router.goBack();
}
export function goForward(theThis) {
checkThis(theThis);
return theThis.props.router.goForward();
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论