基於React ant design 動態路由根據url的動態id，分別不同的頁面，並設置默認跳轉頁面

• 效果圖

法一

獲取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
}

法二

1. 將history.replace相關代碼刪掉；
2. “/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;