[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","yunqiangwu","page",1,"limit",20,"total","id","34372","avatar_url","https://avatars1.githubusercontent.com/u/26475774?v=4","githubUsername","create_at","2018-08-05 02:54:03.89","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"35328","author_id","tab","share","content","# 给React路由加上Tabs页签效果\r\n\r\n很多后台管理系统中都有多Tab窗口切换多效果比如 [jQadmin](https://jqadmin.jqcool.net/simple/) 中的的效果：\r\n\r\n![](http://temp.jajabjbj.top/18-8-5/66670027.jpg)\r\n\r\n> [jQadmin github 链接](https://github.com/itcodes/jqadmin)\r\n\r\njQadmin中实现的tabs切换的效果以及很多中台后端系统中这种类似的功能大部分是通过 iframe 标签来实现的。\r\n\r\n如果要走在 React 框架中实现这种效果，我们不能使用 iframe 来实现，react构建到大型常规应用中，一般都会有一个全局到 state 状态树，而网页到多个 frame 中 js 到执行环境是隔离的，所以没办法统一使用 Redux 这样就工具做到统一的状态管理了，这个方案pass、掉。\r\n\r\n那么如何在React中实现Tabs效果，你可能想到到第一个方案是通过 Antd 提供到 Tabs 组件实现这个需求，但是还是会有一个问题，在 Tabs 下面切换页面是并不是通过 React-Router 切换页面到，所以这个方案 pass 掉。\r\n\r\n### 解决思路\r\n\r\n在 React-Router中有一个 history 对象，history这个为React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页应用至关重要的功能。\r\n\r\n通过 history 我们可以：\r\n- 获取当前页面路由\r\n- 监听页面路由变化\r\n- 设置当前页面切换到另外一个页面\r\n\r\n所以我们只要拿到history对象,我们完全可以实现 Tabs 页面切换这个功能\r\n\r\n在 React-Router 4 中还提供一张根简单到方式获取 history 对象： withRouter高阶组件，提供了history让你使用~\r\n```jsx\r\nimport React from \"react\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n myFunction() {\r\n this.props.history.push(\"/some/Path\");\r\n }\r\n ...\r\n}\r\nexport default withRouter(MyComponent);\r\n```\r\n\r\n为了实现这个功能，我们可以定义一个组件 `RouterTabs` 。\r\n\r\n在 `RouterTabs` 中可以使用 `@withRouter` 注入 history 。\r\n\r\n在组件中通过 history 监听路由到变化，当切换到新到页面时，在`RouterTabs`的state中增加一个页签到数据，并把当前到路由参数也保存下来，并设置当前路由对于的页签为激活状态，切换到其他路由时，根据 history 的事件变更组件到状态，让组件和页面保持同步。\r\n\r\n点击 RouterTabs 上面到标签，通过 `history`控制页面路由的切换。\r\n\r\n具体实现代码如下：\r\n```jsx\r\n\r\nimport React, { Component } from 'react';\r\nimport ReactDom from 'react-dom';\r\nimport classNames from 'classnames';\r\nimport { Tag, Dropdown, Icon, Tooltip, Menu } from 'antd';\r\nimport styles from './index.less';\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nconst { SubMenu } = Menu;\r\n\r\n\r\n// 模拟全局路由配置对象，\r\nconst routerCcnfig = [\r\n '/a': {name: 'A页面'},\r\n '/b': {name: 'B页面'}\r\n];\r\n\r\n// 通过 pathname 获取 pathname 对应到路由描述信息对象\r\nconst getTitleByPathname = (pathname) => {\r\n return routerCcnfig[pathname]:pathname;\r\n}\r\n\r\n@withRouter\r\nexport class RouterTabs extends Component {\r\n static unListen = null;\r\n static defaultProps = {\r\n initialValue: [],\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n const { pathname } = this.props.location;\r\n \r\n this.state = {\r\n currentPageName: [], // 当前路由对应到 pathname\r\n refsTag: [], // tabs 所有到所有页签\r\n searchMap: {}, // 每个页签对应的路由参数\r\n };\r\n\r\n this.handleMenuClick = this.handleMenuClick.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (this.unListen) {\r\n this.unListen();\r\n this.unListen = null;\r\n }\r\n // 监听路由切换事件\r\n this.unListen = this.props.history.listen((_location) => {\r\n if (this.didUnMounted) {\r\n return;\r\n }\r\n if (this.notListenOnce) {\r\n this.notListenOnce = false;\r\n return;\r\n }\r\n const { pathname } = _location;\r\n if (pathname === '/' || !getTitleByPathname(pathname)) {\r\n this.setState({\r\n currentPageName: '',\r\n });\r\n return;\r\n }\r\n const newRefsTag = [...this.state.refsTag];\r\n const currentPathname = pathname;\r\n if (newRefsTag.indexOf(currentPathname) === -1) {\r\n newRefsTag.push(currentPathname);\r\n }\r\n this.state.searchMap[pathname] = _location.search;\r\n this.setState({\r\n currentPageName: pathname,\r\n refsTag: newRefsTag,\r\n });\r\n // 假如是新的导航item 添加进来,需要在添加完成后调用 scrollIntoTags\r\n clearTimeout(this.tagChangeTimerId);\r\n this.tagChangeTimerId = setTimeout(() => {\r\n this.scrollIntoTags(pathname);\r\n }, 100);\r\n });\r\n const { pathname } = this.props.location;\r\n this.scrollIntoTags(pathname);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.didUnMounted = true;\r\n if (this.unListen) {\r\n this.unListen();\r\n this.unListen = null;\r\n }\r\n }\r\n\r\n scrollIntoTags(pathname) {\r\n let dom;\r\n try {\r\n // eslint-disable-next-line react/no-find-dom-node\r\n dom = ReactDom.findDOMNode(this)\r\n .querySelector(`[data-key=\"${pathname}\"]`);\r\n if (dom === null) {\r\n // 菜单还没有假如导航条(横)\r\n } else {\r\n // 菜单已经加入导航条(横)\r\n dom.scrollIntoView(false);\r\n }\r\n } catch (e) {\r\n // console.error(e);\r\n }\r\n }\r\n\r\n handleClose = (tag) => {\r\n const { pathname } = this.props.location;\r\n const { history } = this.props;\r\n let { currentPageName } = this.state;\r\n const { searchMap } = this.state;\r\n const newRefsTag = [...this.state.refsTag.filter(t => t !== tag)];\r\n if (currentPageName === tag) {\r\n currentPageName = this.state.refsTag[this.state.refsTag.indexOf(tag) - 1];\r\n }\r\n this.setState({\r\n currentPageName,\r\n refsTag: newRefsTag,\r\n });\r\n if (pathname !== currentPageName) {\r\n this.notListenOnce = true;\r\n history.push({\r\n pathname: currentPageName,\r\n search: searchMap[currentPageName],\r\n });\r\n }\r\n };\r\n\r\n handleClickTag = (tag, e) => {\r\n if (e && e.target.tagName.toLowerCase() === 'i') {\r\n return;\r\n }\r\n if (tag !== this.state.currentPageName) {\r\n this.props.history.push({\r\n pathname: tag,\r\n search: this.state.searchMap[tag] ? this.state.searchMap[tag].replace(/from=[^&]+&?/, '') : undefined,\r\n });\r\n }\r\n }\r\n\r\n handleMenuClick = (e) => {\r\n const eKey = e.key;\r\n let currentPathname = this.props.location.pathname;\r\n const { refsTag } = this.state;\r\n\r\n let newRefsTag;\r\n if (eKey === '1') {\r\n newRefsTag = '/';\r\n currentPathname = '首页';\r\n } else if (eKey === '2') {\r\n newRefsTag = [webConfig.indexPath];\r\n if (currentPathname !== webConfig.indexPath) {\r\n newRefsTag.push(currentPathname);\r\n }\r\n } else {\r\n this.handleClickTag(eKey);\r\n return;\r\n }\r\n if (currentPathname !== this.state.currentPageName) {\r\n this.props.history.push({\r\n pathname: currentPathname,\r\n search: this.state.searchMap[currentPathname],\r\n });\r\n }\r\n this.setState({\r\n refsTag: newRefsTag,\r\n });\r\n }\r\n\r\n render() {\r\n const { currentPageName, refsTag } = this.state;\r\n const { className, style } = this.props;\r\n const cls = classNames(styles['router-tabs'], className);\r\n\r\n const tags = refsTag.map((pathname, index) => {\r\n const routeInfo = getTitleByPathname(pathname); // 这里假设每个pathname都能获取到指定到页面名称\r\n let title = routeInfo ? routeInfo.name : '404';\r\n const isLongTag = title.length > 30;\r\n const tagElem = (\r\n this.handleClickTag(pathname, e)}\r\n closable={index !== 0}\r\n afterClose={() => this.handleClose(pathname)}\r\n >\r\n {isLongTag ? `${title.slice(\r\n 0, 30)}...` : title}\r\n \r\n );\r\n return isLongTag\r\n ? {tagElem}\r\n : tagElem;\r\n });\r\n this.tags = tags;\r\n /* eslint-disable */\r\n return (\r\n

\r\n

\r\n {tags}\r\n

\r\n

\r\n \r\n 关闭所有\r\n 关闭其他\r\n \r\n {\r\n tags.map(item => ({item.props.children}))\r\n }\r\n \r\n }\r\n >\r\n \r\n 标签选项 \r\n \r\n \r\n

\r\n

\r\n );\r\n }\r\n}\r\n\r\n\r\n```\r\n\r\n样式定义：\r\n\r\n```less\r\n\r\n.router-tabs {\r\n user-select: none;\r\n display: flex;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all .3s;\r\n box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px 0, inset rgba(0, 0, 0, 0.52) 0 5px 2px;\r\n clear: both;\r\n\r\n\r\n .tag {\r\n margin-top: 4px;\r\n height: 32px;\r\n line-height: 32px;\r\n border: 1px solid #e9eaec!important;\r\n color: #495060!important;\r\n background: #fff!important;\r\n padding: 0 12px;\r\n\r\n .icon {\r\n display: inline-block;\r\n width: 12px;\r\n height: 12px;\r\n margin-right: 8px;\r\n border-radius: 50%;\r\n background: #e9eaec;\r\n position: relative;\r\n top: 1px;\r\n }\r\n &.active {\r\n .icon {\r\n background: #2d8cf0;\r\n }\r\n }\r\n }\r\n \r\n}\r\n\r\n```\r\n\r\n## 使用方法\r\n\r\n只要把组件放到页面可以实现 Tabs 页面切换到效果了\r\n```\r\nrender() {\r\n return (\r\n \r\n

\r\n \r\n

\r\n \r\n \r\n { routers }\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n```\r\n\r\n## 预览效果\r\n\r\n![](http://temp.jajabjbj.top/18-8-5/60607949.jpg)","title","给React路由加上Tabs页签效果","last_reply_at","2019-12-04 09:45:55.435","good","top",3,"visit_count",10309,"2018-08-05 03:09:11.975","author",{"_13":14,"_22":23}]