react-antd 解决tab切换在地址栏输入对应的链接出现导航与内容对应不上的问题

import React from 'react';
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import Outline from './monitor-outline';
import Host from './host-manage';
import Process from './process-manage';
import Disk from './disk-manage';
import Set from './setting-manage';
import { queryTo } from '../../utils/history';
import { roleActions } from '../../store/actions';

const { TabPane } = Tabs;

const initArr = ['outline', 'host', 'process', 'disk', 'setting'];

export default class MonitorPage extends React.Component {
  static propTypes = {
    location: PropTypes.object.isRequired,
  };

  state = {
    tabArr: [],
    contentType: '',
  };

  componentDidMount() {
    const { location: { query } } = this.props;
    if (query.tabKey && initArr.indexOf(query.tabKey) === -1) {
      window.location.href = '/notFound';
      return;
    }
    this.fetchSubTab(63);
  }

  async fetchSubTab(id) {
    this.dataLoading = roleActions.fetchSubTab(id);
    const data = await this.dataLoading;
    let arr = data.data.map(d => d.perm);
    const { location: { query } } = this.props;
    if (query.tabKey && arr.indexOf(query.tabKey) === -1) {
      window.location.href = '/notPower';
      return;
    }
    this.setState({
      tabArr: arr,
    });
    if (arr.indexOf(query.tabKey) > -1) {
      this.setState({
        contentType: query.tabKey,
      });
    } else {
      this.setState({
        contentType: arr[0],
      });
    }
  }

  tabChange = (e) => {
    this.setState({
      contentType: e,
    });
    queryTo({ tabKey: e });
  };

  render() {
    const { contentType, tabArr } = this.state;
    return (
      <div style={{ paddingTop: 12 }}>
        {
          tabArr.length > 0 && <Tabs defaultActiveKey={contentType} onChange={this.tabChange}>
            {
              tabArr.indexOf('outline') > -1 && <TabPane tab="监控概要" key="outline">
                <Outline />
              </TabPane>
            }
            {
              tabArr.indexOf('host') > -1 && <TabPane tab="主机管理" key="host">
                <Host />
              </TabPane>
            }
            {
              tabArr.indexOf('process') > -1 && <TabPane tab="进程管理" key="process">
                <Process />
              </TabPane>
            }
            {
              tabArr.indexOf('disk') > -1 && <TabPane tab="磁盘管理" key="disk">
                <Disk />
              </TabPane>
            }
            {
              tabArr.indexOf('setting') > -1 && <TabPane tab="参数设置" key="setting">
                <Set />
              </TabPane>
            }
          </Tabs>
        }
      </div>
    );
  }
}

将defaultActiveKey改为activeKey !!!

import React from 'react';
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import Outline from './monitor-outline';
import Host from './host-manage';
import Process from './process-manage';
import Disk from './disk-manage';
import Set from './setting-manage';
import { queryTo } from '../../utils/history';
import { roleActions } from '../../store/actions';

const { TabPane } = Tabs;

const initArr = ['outline', 'host', 'process', 'disk', 'setting'];

export default class MonitorPage extends React.Component {
  static propTypes = {
    location: PropTypes.object.isRequired,
  };

  state = {
    tabArr: [],
    activeKey: '',
  };

  componentDidMount() {
    const { location: { query } } = this.props;
    if (query.tabKey && initArr.indexOf(query.tabKey) === -1) {
      window.location.href = '/notFound';
      return;
    }
    this.fetchSubTab(63);
  }

  async fetchSubTab(id) {
    this.dataLoading = roleActions.fetchSubTab(id);
    const data = await this.dataLoading;
    let arr = data.data.map(d => d.perm);
    const { location: { query } } = this.props;
    if (query.tabKey && arr.indexOf(query.tabKey) === -1) {
      window.location.href = '/notPower';
      return;
    }
    this.setState({
      tabArr: arr,
    });
    if (arr.indexOf(query.tabKey) > -1) {
      this.setState({
        activeKey: query.tabKey
      });
    } else {
      this.setState({
        activeKey: arr[0]
      });
    }
  }

  tabChange = (e) => {
    this.setState({
      activeKey: e
    });
    queryTo({ tabKey: e });
  };

  render() {
    const { tabArr, activeKey } = this.state;
    return (
      <div style={{ paddingTop: 12 }}>
        {
          tabArr.length > 0 && <Tabs activeKey={activeKey} onChange={this.tabChange}>
            {
              tabArr.indexOf('outline') > -1 && <TabPane tab="监控概要" key="outline">
                <Outline />
              </TabPane>
            }
            {
              tabArr.indexOf('host') > -1 && <TabPane tab="主机管理" key="host">
                <Host />
              </TabPane>
            }
            {
              tabArr.indexOf('process') > -1 && <TabPane tab="进程管理" key="process">
                <Process />
              </TabPane>
            }
            {
              tabArr.indexOf('disk') > -1 && <TabPane tab="磁盘管理" key="disk">
                <Disk />
              </TabPane>
            }
            {
              tabArr.indexOf('setting') > -1 && <TabPane tab="参数设置" key="setting">
                <Set />
              </TabPane>
            }
          </Tabs>
        }
      </div>
    );
  }
}

这样以后，在地址栏输入对应的链接，就会显示对应的内容。