antd页面内的导航跳转

1.在route.js配置相应导航点击后的跳转路径及资源，部分关键配置如下：

routes: [
      // dashboard
      { path: '/', redirect: '/user/login' },
      //系统设置
      {
        path: '/setting/account',
        name: 'setting',
        component: './Setting/personal',
        routes: [
          {
            path: '/setting/account',
            redirect: '/setting/account/base',
          },
          // 点击菜单栏按钮进入base标签页面
          // 注意处理好自菜单的配置，否则可能会出现点击菜单栏跳转之后本该被选中的菜单取消选中，或者点击之后菜单栏丢失
          {
          	// 请求的url
            path: '/setting/account/base',
            // 资源的实际位置
            component: './Setting/BaseView',
          },
          {
            path: '/setting/account/security',
            component: './Setting/SecurityView',
          },
          {
            path: '/setting/account/binding',
            component: './Setting/BindingView',
          },
        ]
      },
      ......
     ]

2.画页面

import React, { Component } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Menu } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import styles from './Personal.less';
import result from '@/locales/en-US/result';

const { Item } = Menu;

@connect(({ user }) => ({
  currentUser: user.currentUser,
}))
class Info extends Component {
  constructor(props) {
    super(props);
    const { match, location } = props;
    const menuMap = {
      base: <FormattedMessage id="app.settings.menuMap.basic" defaultMessage="Basic Settings" />,
      security: (
        <FormattedMessage id="app.settings.menuMap.security" defaultMessage="Security Settings" />
      ),
      binding: (
        <FormattedMessage id="app.settings.menuMap.binding" defaultMessage="Account Binding" />
      ),
    };
    const key = location.pathname.replace(`${match.path}/`, '');
    this.state = {
      mode: 'inline',
      menuMap,
      selectKey: menuMap[key] ? key : 'base',
    };
  }

  static getDerivedStateFromProps(props, state) {
    const { match, location } = props;
    let selectKey = location.pathname.replace(`${match.path}/`, '');
    selectKey = state.menuMap[selectKey] ? selectKey : 'base';
    if (selectKey !== state.selectKey) {
      return { selectKey };
    }
    return null;
  }

  componentDidMount() {
    window.addEventListener('resize', this.resize);
    this.resize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  getmenu = () => {
    const { menuMap } = this.state;
    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
  };

  getRightTitle = () => {
    const { selectKey, menuMap } = this.state;
    return menuMap[selectKey];
  };

  selectKey = ({ key }) => {
    router.push(`/setting/account/${key}`);
    this.setState({
      selectKey: key,
    });
  };

  resize = () => {
    if (!this.main) {
      return;
    }

    const { mode: currentMode } = this.state;

    let mode = 'inline';
    const { offsetWidth } = this.main;

    if (offsetWidth > 400 && offsetWidth < 641) {
      mode = 'horizontal';
    }

    if (window.innerWidth < 768 && offsetWidth > 400) {
      mode = 'horizontal';
    }

    if (mode !== currentMode) {
      requestAnimationFrame(() => this.setState({ mode }));
    }
  };

  render() {
    const { children, currentUser } = this.props;
    const { mode, selectKey } = this.state;

    return (
      <GridContent>
        <div
          className={styles.main}
          ref={ref => {
            this.main = ref;
          }}
        >
          <div className={styles.leftmenu}>
            <Menu mode={mode} selectedKeys={[selectKey]} onClick={this.selectKey}>
              {this.getmenu()}
            </Menu>
          </div>
          <div className={styles.right}>
            <div className={styles.title}>{this.getRightTitle()}</div>
            {children}
          </div>
        </div>
      </GridContent>
    );
  }
}

export default Info;

附：主页面的样式文件Personal.less

@import '~antd/lib/style/themes/default.less';

.main {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  overflow: auto;
  background-color: @body-background;
  .leftmenu {
    width: 224px;
    border-right: @border-width-base @border-style-base @border-color-split;
    :global {
      .ant-menu-inline {
        border: none;
      }
      .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
        font-weight: bold;
      }
    }
  }
  .right {
    flex: 1;
    padding-top: 8px;
    padding-right: 40px;
    padding-bottom: 8px;
    padding-left: 40px;
    .title {
      margin-bottom: 12px;
      color: @heading-color;
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
    }
  }
  :global {
    .ant-list-split .ant-list-item:last-child {
      border-bottom: 1px solid #e8e8e8;
    }
    .ant-list-item {
      padding-top: 14px;
      padding-bottom: 14px;
    }
  }
}
:global {
  .ant-list-item-meta {
    // 账号绑定图标
    .wechat {
      display: block;
      color: #02CB0b;
      font-size: 48px;
      line-height: 48px;
      border-radius: @border-radius-base;
    }
    .mobile {
      color: #2eabff;
      font-size: 48px;
      line-height: 48px;
      border-radius: @border-radius-base;
    }
    .taobao {
      display: block;
      color: #ff4000;
      font-size: 48px;
      line-height: 48px;
      border-radius: @border-radius-base;
    }
    .dingding {
      margin: 2px;
      padding: 6px;
      color: #fff;
      font-size: 32px;
      line-height: 32px;
      background-color: #2eabff;
      border-radius: @border-radius-base;
    }
    .alipay {
      color: #2eabff;
      font-size: 48px;
      line-height: 48px;
      border-radius: @border-radius-base;
    }
  }

  // 密码强度
  font.strong {
    color: @success-color;
  }
  font.medium {
    color: @warning-color;
  }
  font.weak {
    color: @error-color;
  }
}

@media screen and (max-width: @screen-md) {
  .main {
    flex-direction: column;
    .leftmenu {
      width: 100%;
      border: none;
    }
    .right {
      padding: 40px;
    }
  }
}