silder的切换对应着tabs切换，某一页面的tabs切换，对应着侧边silder切换

需求: 1.silder的切换对应着tabs切换;2.某一页面的tabs切换，对应着侧边silder切换

分析1: 获取当前的silderKey，监听其变换，并且设置想要切换的tsbsKey

分析2

2.1 错误分析--想要通过监听当前的tabsKey，跳转到对应的路由。因为在分析1的基础上，跳转到路由后其tabsKey也会显示正常。然而只有首次生效。因为跳转路由后，再切换tabs,由于路由地址没有发生改变，侧边silder没有正常跳转。当加上强制跳转后。页面由于监听了silderKey就会无限循环。

2.2 正确分析--还是通过监听tabKey，当tabs切换时，需要重新dispatch当前的silderKey，更新侧边栏当前选择的key。

    import React, { useEffect, useState } from 'react';
    import { Breadcrumb, Drawer, Tabs, Button, Input } from 'antd';
    import { history, useLocation, useSelector, useDispatch } from 'umi';
    import Describe from './Describe';
    import Restrain from './Restrain';
    import Project from './Project';
    import Result from './Result';

    const { TabPane } = Tabs;
    const PathPlan = () => {
      const location = useLocation();
      const dispatch = useDispatch();
      const [tabKey, setTabKey] = useState('1');
      const activeSliderKey = useSelector((state) => state.common.activeSliderKey);
      
      // 分析1
      useEffect(() => {
        if (activeSliderKey === '/pathPlan/restrain') {
          setTabKey('2');
        }
      }, [activeSliderKey]);
      useEffect(() => {
      
      // 分析2
        if (tabKey === '2') {
          dispatch({
            type: 'common/saveSliderKey',
            payload: { activeSliderKey: '/pathPlan/restrain' },
          });
        } else {
          dispatch({
            type: 'common/saveSliderKey',
            payload: { activeSliderKey: '/pathPlan' },
          });
        }
      }, [tabKey]);

      const tabChange = (key) => {
        setTabKey(key);
      };
      return (
        <div className={styles.pathPlan}>
                  <Tabs activeKey={tabKey} type="card" onChange={tabChange}>
                    <TabPane tab="名称描述" key="1">
                      {tabKey == '1' && (
                        <div>
                          <Describe></Describe>
                        </div>
                      )}
                    </TabPane>
                    <TabPane tab="路径约束" key="2">
                      {tabKey == '2' && (
                        <div>
                          <Restrain group={group}></Restrain>
                        </div>
                      )}
                    </TabPane>
                    <TabPane tab="开始规划" key="3">
                      {tabKey == '3' && (
                        <div>
                          <Project></Project>
                        </div>
                      )}
                    </TabPane>
                    <TabPane tab="路径规划结果" key="4">
                      {tabKey == '4' && (
                        <div>
                          <Result></Result>
                        </div>
                      )}
                    </TabPane>
                  </Tabs>
          )}
   
        </div>
      );
    };

    export default PathPlan;