Ant Design 控制Tabs标签页 哪页高亮

项目上遇到一个关于Ant Design Tabs标签页问题。

项目背景：用户个人中心包括基本信息、我的钱包、我的订单、消息与通知四个模块(如下左图)；需求为该用户提交完订单，跳转到我的订单模块(如下右图)，但是项目中个人中心是一个组件，基本信息、我的钱包、我的订单、消息与通知是四个小组件，所以只能调到个人中心组件，且默认跳到基本信息。这是不符合需求的。

为了解决该问题，我先在提交页面跳转时加如下代码，携带id（我的订单）；

that.props.history.push({
	pathname: '/app/header/Personal',
	state: {
		id: 3
	}
});

 在个人中心页面判断，

第一种尝试：然后给defaultActiveKey属性赋值，但是等跳转过去又是在第一项，不知为何，赋值就是不管用。

第二种尝试：然后给activeKey属性赋值，跳转过去确实是第三项，但是切换别的项失败。

第三种尝试：继续第二种尝试，查看文档，发现有onChange事件，每次更改，给activeKey赋值，问题解决。还有一个onTabClick事件，也可以运用。

代码如下：

class Personal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tabPosition: 'left',
            activeKey: '',
        }
    };

    componentDidMount() {
        if (this.props.history.location.state === undefined) {
            this.setState({
                activeKey: '1'
            });
        }else{
			let state = this.props.history.location.state;
            this.setState({
                activeKey: state.id+''
            });
        }
    }
	
	callback = (key) => {
		this.setState({
			activeKey: key
		});
	}
	
    render() {
        const {activeKey} = this.state;
        return (
            <Tabs onChange={this.callback} style={{marginTop: '16px',paddingTop: '24px'}} activeKey={activeKey} tabPosition={this.state.tabPosition} size="large">
                <TabPane tab="基本信息" key="1">
                    <Basic/>
                </TabPane>

                <TabPane tab="我的钱包" key="2">
                    <Wallet/>
                </TabPane>

                <TabPane tab="我的订单" key="3">
                    <Order/>
                </TabPane>

                <TabPane tab="消息与通知" key="4">
                    <Notice/>
                </TabPane>
            </Tabs>
        );
    }
}

export default Personal;

官方文档：https://ant.design/components/tabs-cn/