- 效果图
法一
获取params,然后进入“/account/company/:id”时获取到的parmas的id为“:id”,在js中判断是否为字符串":id",若是history.replace跳转到对应的"/account/company/index"页面
缺点:url会出现闪跳
- config.ts 部分代码
{
name: 'account',
icon: 'user',
path: '/account',
routes: [
{
name: 'center',
icon: 'TeamOutlined',
path: '/account/company/:id',
component: './account/company',
},
]
}
- js代码(可放入componentDidMount中)
const {dispatch, match: {params: {id}}} = this.props;
if (id === ':id') {
history.replace('/account/company/index');
return
}
法二
- 将history.replace相关代码删掉;
- “/account/company/index”添加到config.ts中
{
name: 'center',
icon: 'TeamOutlined',
hideInMenu: true,
path: '/account/company/:id',
component: './account/company'
},{
name: 'center',
icon: 'TeamOutlined',
path: '/account/company/index',
component: './account/company',
},
}
- Component.page
import {Card, Menu} from 'antd';
import {Route, Switch} from 'react-router-dom';
import React, {Component} from 'react';
import {GridContent} from '@ant-design/pro-layout';
import {FormattedMessage, history} from 'umi';
import Certificate from './components/Certificate';
import RoleManage from './components/RoleManage';
import AuthorMange from './components/AuthorMange';
import WorkFlow from './components/WorkFlow';
import Detail from './components/Information';
const {Item} = Menu;
interface CenterProps {
match: {
params: {
id: string;
};
};
}
interface CenterStates {
tabKey: string;
menuMap: {
index: any;
certificate: any;
'role-manage': any;
'author-mange': any;
'account-manage': any;
workflow: any;
};
}
type RouterKeys =
| 'detail'
| 'certificate'
| 'roleManage'
| 'authorMange'
| 'accountManage'
| 'workflow';
class Center extends Component<CenterProps, CenterStates> {
state: CenterStates = {
tabKey: 'index',
// 这是tab列表
menuMap: {
index: <FormattedMessage id="company.home.index"/>,
certificate: <FormattedMessage id="company.home.certificate"/>,
'role-manage': <FormattedMessage id="company.home.roleMange"/>,
'author-mange': <FormattedMessage id="company.home.authorMange"/>,
'account-manage': <FormattedMessage id="company.home.accountMange"/>,
workflow: <FormattedMessage id="company.home.workflow"/>,
},
};
componentDidMount() {
const {
match: {
params: {id},
},
} = this.props;
if (id === ':id') {
history.replace('/account/company/index');
return;
}
this.setState({
tabKey: id,
});
}
selectKey = (key: string) => {
this.setState({
tabKey: key,
});
history.push(`/account/company/${key}`);
};
getMenu = () => {
const {menuMap} = this.state;
return Object.keys(menuMap).map((item) => <Item key={item}>{menuMap[item]}</Item>);
};
render() {
const {tabKey} = this.state;
return (
<GridContent>
<Menu
mode="horizontal"
selectedKeys={[tabKey]}
onClick={({key}) => this.selectKey(key as RouterKeys)}
>
{this.getMenu()}
</Menu>
<Card className="demo">
<Switch>
<Route exact path="/account/company/index" component={Detail}/>
<Route exact path="/account/company/certificate" component={Certificate}/>
<Route exact path="/account/company/role-manage" component={RoleManage}/>
<Route exact path="/account/company/author-mange" component={AuthorMange}/>
<Route exact path="/account/company/account-manage" component={RoleManage}/>
<Route exact path="/account/company/workflow" component={WorkFlow}/>
</Switch>
</Card>
</GridContent>
);
}
}
export default Center;