给React路由加上Tabs页签效果

很多后台管理系统中都有多Tab窗口切换多效果比如 jQadmin 中的的效果：

jQadmin github 链接

jQadmin中实现的tabs切换的效果以及很多中台后端系统中这种类似的功能大部分是通过 iframe 标签来实现的。

如果要走在 React 框架中实现这种效果，我们不能使用 iframe 来实现，react构建到大型常规应用中，一般都会有一个全局到 state 状态树，而网页到多个 frame 中 js 到执行环境是隔离的，所以没办法统一使用 Redux 这样就工具做到统一的状态管理了，这个方案pass、掉。

那么如何在React中实现Tabs效果，你可能想到到第一个方案是通过 Antd 提供到 Tabs 组件实现这个需求，但是还是会有一个问题，在 Tabs 下面切换页面是并不是通过 React-Router 切换页面到，所以这个方案 pass 掉。

解决思路

在 React-Router中 有一个 history 对象，history这个为React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页应用至关重要的功能。

通过 history 我们可以：

• 获取当前页面路由
• 监听页面路由变化
• 设置当前页面切换到另外一个页面

所以我们只要拿到history对象,我们完全可以实现 Tabs 页面切换这个功能

在 React-Router 4 中还提供一张根简单到方式获取 history 对象： withRouter高阶组件，提供了history让你使用~

import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

为了实现这个功能，我们可以定义一个组件 RouterTabs 。

在 RouterTabs 中可以使用 @withRouter 注入 history 。

在组件中 通过 history 监听 路由到变化，当切换到新到页面时，在RouterTabs的state中增加一个页签到数据，并把当前到路由参数也保存下来 ，并设置当前路由对于的页签为激活状态，切换到其他路由时，根据 history 的事件变更组件到状态，让组件和页面保持同步。

点击 RouterTabs 上面到标签，通过 history控制页面路由的切换。

具体实现代码如下：

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import classNames from 'classnames';
import { Tag, Dropdown, Icon, Tooltip, Menu } from 'antd';
import styles from './index.less';
import {withRouter} from "react-router-dom";

const { SubMenu } = Menu;


// 模拟全局路由配置对象，
const routerCcnfig = [
    '/a': {name: 'A页面'},
    '/b': {name: 'B页面'}
];

// 通过 pathname 获取 pathname 对应到路由描述信息对象
const getTitleByPathname = (pathname) => {
    return routerCcnfig[pathname]:pathname;
}

@withRouter
export class RouterTabs extends Component {
  static unListen = null;
  static defaultProps = {
    initialValue: [],
  };

  constructor(props) {
    super(props);
    const { pathname } = this.props.location;
 
    this.state = {
      currentPageName: [], // 当前路由对应到 pathname
      refsTag: [], // tabs 所有到所有页签
      searchMap: {}, // 每个 页签对应的路由参数
    };

    this.handleMenuClick = this.handleMenuClick.bind(this);
  }

  componentDidMount() {
    if (this.unListen) {
      this.unListen();
      this.unListen = null;
    }
    // 监听路由切换事件
    this.unListen = this.props.history.listen((_location) => {
      if (this.didUnMounted) {
        return;
      }
      if (this.notListenOnce) {
        this.notListenOnce = false;
        return;
      }
      const { pathname } = _location;
      if (pathname === '/' || !getTitleByPathname(pathname)) {
        this.setState({
          currentPageName: '',
        });
        return;
      }
      const newRefsTag = [...this.state.refsTag];
      const currentPathname = pathname;
      if (newRefsTag.indexOf(currentPathname) === -1) {
        newRefsTag.push(currentPathname);
      }
      this.state.searchMap[pathname] = _location.search;
      this.setState({
        currentPageName: pathname,
        refsTag: newRefsTag,
      });
      // 假如是新的 导航item 添加进来,需要在 添加完成后调用 scrollIntoTags
      clearTimeout(this.tagChangeTimerId);
      this.tagChangeTimerId = setTimeout(() => {
        this.scrollIntoTags(pathname);
      }, 100);
    });
    const { pathname } = this.props.location;
    this.scrollIntoTags(pathname);
  }

  componentWillUnmount() {
    this.didUnMounted = true;
    if (this.unListen) {
      this.unListen();
      this.unListen = null;
    }
  }

  scrollIntoTags(pathname) {
    let dom;
    try {
      // eslint-disable-next-line react/no-find-dom-node
      dom = ReactDom.findDOMNode(this)
        .querySelector(`[data-key="${pathname}"]`);
      if (dom === null) {
        // 菜单 还没有假如 导航条(横)
      } else {
        // 菜单 已经加入 导航条(横)
        dom.scrollIntoView(false);
      }
    } catch (e) {
      // console.error(e);
    }
  }

  handleClose = (tag) => {
    const { pathname } = this.props.location;
    const { history } = this.props;
    let { currentPageName } = this.state;
    const { searchMap } = this.state;
    const newRefsTag = [...this.state.refsTag.filter(t => t !== tag)];
    if (currentPageName === tag) {
      currentPageName = this.state.refsTag[this.state.refsTag.indexOf(tag) - 1];
    }
    this.setState({
      currentPageName,
      refsTag: newRefsTag,
    });
    if (pathname !== currentPageName) {
      this.notListenOnce = true;
      history.push({
        pathname: currentPageName,
        search: searchMap[currentPageName],
      });
    }
  };

  handleClickTag = (tag, e) => {
    if (e && e.target.tagName.toLowerCase() === 'i') {
      return;
    }
    if (tag !== this.state.currentPageName) {
      this.props.history.push({
        pathname: tag,
        search: this.state.searchMap[tag] ? this.state.searchMap[tag].replace(/from=[^&]+&?/, '') : undefined,
      });
    }
  }

  handleMenuClick = (e) => {
    const eKey = e.key;
    let currentPathname = this.props.location.pathname;
    const { refsTag } = this.state;

    let newRefsTag;
    if (eKey === '1') {
      newRefsTag = '/';
      currentPathname = '首页';
    } else if (eKey === '2') {
      newRefsTag = [webConfig.indexPath];
      if (currentPathname !== webConfig.indexPath) {
        newRefsTag.push(currentPathname);
      }
    } else {
      this.handleClickTag(eKey);
      return;
    }
    if (currentPathname !== this.state.currentPageName) {
      this.props.history.push({
        pathname: currentPathname,
        search: this.state.searchMap[currentPathname],
      });
    }
    this.setState({
      refsTag: newRefsTag,
    });
  }

  render() {
    const { currentPageName, refsTag } = this.state;
    const { className, style } = this.props;
    const cls = classNames(styles['router-tabs'], className);

    const tags = refsTag.map((pathname, index) => {
      const routeInfo = getTitleByPathname(pathname); // 这里假设每个pathname都能获取到指定到页面名称
      let title = routeInfo ? routeInfo.name : '404';
      const isLongTag = title.length > 30;
      const tagElem = (
        <Tag
          key={pathname}
          data-key={pathname}
          className={classNames(styles.tag,
            { [styles.active]: pathname === currentPageName })}
          onClick={e => this.handleClickTag(pathname, e)}
          closable={index !== 0}
          afterClose={() => this.handleClose(pathname)}
        >
          <span className={styles.icon} />{isLongTag ? `${title.slice(
            0, 30)}...` : title}
        </Tag>
      );
      return isLongTag
        ? <Tooltip title={title} key={`tooltip_${pathname}`}>{tagElem}</Tooltip>
        : tagElem;
    });
    this.tags = tags;
    /* eslint-disable */
    return (
      <div className={cls} style={{
        ...style,
        height: '40px',
        maxHeight: '40px',
        lineHeight: '40px',
        marginRight: '-12px',
      }}>
        <div style={{
          flex: '1',
          height: '40px',
          position: 'relative',
          overflow: 'hidden',
          background: '#f0f0f0',
          padding: '0px 0px',
        }}>
          <div style={{
            position: 'absolute',
            whiteSpace: 'nowrap',
            width: '100%',
            top: '0px',
            padding: '0px 10px 0px 10px',
            overflowX: 'auto',
          }}>
            {tags}
          </div>
        </div>
        <div style={{
          width: '96px',
          height: '100%',
          background: '#fff',
          boxShadow: '-3px 0 15px 3px rgba(0,0,0,.1)',
        }}>
          <Dropdown overlay={<Menu onClick={this.handleMenuClick}>
            <Menu.Item key="1">关闭所有</Menu.Item>
            <Menu.Item key="2">关闭其他</Menu.Item>
            <SubMenu title="切换标签">
              {
                tags.map(item => (<Menu.Item key={item.key}>{item.props.children}</Menu.Item>))
              }
            </SubMenu>
          </Menu>}
          >
            <Tag size={'small'} color="#2d8cf0"
              style={{ marginLeft: 12 }}>
              标签选项 <Icon type="down" />
            </Tag>
          </Dropdown>
        </div>
      </div>
    );
  }
}

样式定义：

.router-tabs {
  user-select: none;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all .3s;
  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px 0, inset rgba(0, 0, 0, 0.52) 0 5px 2px;
  clear: both;


  .tag {
    margin-top: 4px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #e9eaec!important;
    color: #495060!important;
    background: #fff!important;
    padding: 0 12px;

    .icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 8px;
      border-radius: 50%;
      background: #e9eaec;
      position: relative;
      top: 1px;
    }
    &.active {
      .icon {
        background: #2d8cf0;
      }
    }
  }
  
}

使用方法

只要把组件放到页面可以实现 Tabs 页面切换到效果了

render() {
    return (
        <Layout>
            <Header className={styles.header}>
                <RouterTabs />
            </Header>
            <Content>
                  <Switch>
                    { routers }
                    <Redirect exact from="/" to={webConfig.indexPath} />
                    <Route component={NotFound} />
                  </Switch>
            </Content>
        </Layout>
    );
  }

预览效果