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

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

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