react-router-dom v6版本实现Tabs路由缓存切换功能
更新时间：2023年10月19日 15:51:08 作者：很甜的西瓜
今天有人问我怎么实现React-Router-dom类似标签页缓存,很久以前用的是react-router v5那个比较容易实现,v6变化挺大,但了解react的机制和react-router的机制就容易了,本文介绍react-router-dom v6版本实现Tabs路由缓存切换,感兴趣的朋友一起看看吧
概要
摆了半年摊，好久没写代码了，今天有人问我怎么实现React-Router-dom类似标签页缓存。后面看了一下router的官网。很久以前用的是react-router v5那个比较容易实现。v6变化挺大，但了解react的机制和react-router的机制就容易了.
想做到切换标签保留页面的内容不变，就要了解react的机制
首先虚拟DOM的机制就是对比，如果找不到就会重新挂载，找到了就更新。
React-Router的机制就是匹配路径，找到了就返回对应的路由组件，找不到返回为null
思路就是v6版本提供了Outlet这个输出子路元素的组件
一般我们会这样写：
但如果要实现标签的话，就不能这样写。但是切换路由，地址一变它就替换了原来的了。所以要做的就是保留所有打开的标签的子路由元素：
主要目的就是保留所有的元素，隐藏路由就行，这样react diff时，还是会找到对应key的路由，这样它只是会更新路由的组件，而不会重新挂载。
如这样写：
效果
完整代码
新建一个html复制进去就可以运行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React-router-dom tabs</title>
<script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.10.1/dist/reset.min.css" rel="external nofollow" >
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/antd@5.10.1/dist/antd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ant-design/pro-components@2.6.30/dist/pro-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@remix-run/router@1.10.0/dist/router.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-router@6.17.0/dist/umd/react-router.production.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/react-router-dom@6.17.0/dist/umd/react-router-dom.production.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" data-preset="env,react">
const { useCallback, useMemo, useEffect, useRef, useState } = React
const { ProLayout } = ProComponents
const { createHashRouter, useOutlet, Navigate, RouterProvider, useLocation, Link, useNavigate } = ReactRouterDOM
const { Tabs, Button, Space, Row, Col, Input, } = antd
const Home = () => {
return <div>Home <Input></Input></div>
}
const DemoA = () => {
return <div>DemoA <Input></Input></div>
}
const DemoB = () => {
return <div>DemoB <Input></Input></div>
}
const ViewPage = (props) => {
const outlet = useOutlet()
return props.render(outlet)
}
const BasicLayout = () => {
const nav = useNavigate()
const location = useLocation()
const route = routes[0]
const [menuDataMap] = useState(() => new Map())
const cacheOutletElements = useRef({}).current
const [tabActiveKey, setTabActiveKey] = useState('')
const [tabItems, setTabItems] = React.useState([])
const addTab = useCallback((item) => {
const existItem = tabItems.find(it => it.key === item.key)
if (!existItem) {
setTabItems([...tabItems, {
key: item.key,
path: item.path,
label: item.name
}])
}
setTabActiveKey(item.key)
}, [tabItems])
const handleSelectMenu = useCallback((selectedKeys) => {
console.log('handleSelectMenu', selectedKeys)
let menuKey = selectedKeys[selectedKeys.length - 1]
let item = menuDataMap.get(menuKey)
if (item && item.path) {
addTab(item)
}
}, [addTab])
const handleTabChange = useCallback((activeKey) => {
setTabActiveKey(activeKey)
const item = tabItems.find(d => d.key === activeKey)
nav(item.path)
}, [tabItems, nav])
const handleTabEditChange = useCallback((activeKey, action) => {
if (action === 'remove') {
delete cacheOutletElements[activeKey]
const newItems = tabItems.filter(d => d.key !== activeKey)
setTabItems(newItems)
if (newItems.length) {
handleTabChange(newItems[0].key)
}
}
}, [tabItems, handleTabChange])
const renderView = useCallback((routeElement) => {
if (!cacheOutletElements[tabActiveKey]) {
cacheOutletElements[tabActiveKey] = <div>{routeElement}</div>
}
return Object.keys(cacheOutletElements).map(key => {
const element = cacheOutletElements[key]
if (key === tabActiveKey) {
return React.cloneElement(element, {
key: key,
style: {
display: 'block'
}
})
} else {
return React.cloneElement(element, {
key: key,
style: {
display: 'none'
}
})
}
})
}, [cacheOutletElements, tabActiveKey])
return <ProLayout route={route} onSelect={handleSelectMenu} location={location} menuItemRender={(item, defaultDom, menuProps) => {
if (item.children) {
return defaultDom
}
menuDataMap.set(item.path, item)
return <Link to={item.path}>{defaultDom}</Link>
}}>
<Tabs hideAdd type='editable-card' onEdit={handleTabEditChange} activeKey={tabActiveKey} onChange={handleTabChange} items={tabItems}>
</Tabs>
<ViewPage render={renderView}></ViewPage>
</ProLayout>
}
const routes = [{
path: '/',
element: <BasicLayout></BasicLayout>,
children: [
{
index: true,
element: <Navigate to="/home"></Navigate>
}, {
path: 'home',
name: "Home",
element: <Home></Home>
}
, {
path: 'a',
name: "DemoA",
element: <DemoA></DemoA>
}
, {
path: 'b',
name: "DemoB",
element: <DemoB></DemoB>
}
]
}]
const router = createHashRouter(routes, {
})
const App = () => {
return <RouterProvider router={router}></RouterProvider>
}
ReactDOM.createRoot(document.getElementById('app')).render(<App></App>)
</script>
</body>
</html>到此这篇关于react-router-dom v6版本实现Tabs路由缓存切换的文章就介绍到这了,更多相关react-router-dom路由缓存切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在React中,我们经常在子组件中调用父组件的方法,一般用props回调即可,这篇文章主要介绍了React父组件如何调用子组件的方法推荐,需要的朋友可以参考下2023-11-11
路由是React项目中相当重要的概念，对于功能较为复杂的网页来说，必然会涉及到不同功能间的页面跳转，本篇文章将对React官方维护的路由库React-Router-Dom的使用和常用组件进行讲解，同时对路由组件传递param参数的方式进行讲解，希望对各位读者有所参考2022-08-08
这篇文章主要介绍了在React中this容易遇到的问题总结，文中有详细的示例代码，希望对大家有一定的帮助,需要的朋友可以参考下2023-05-05
这篇文章主要为大家介绍了React useState的错误用法避坑详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
详解使用create-react-app快速构建React开发环境
这篇文章主要介绍了详解使用create-react-app快速构建React开发环境,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家介绍了React弹窗使用方式NiceModal重新思考分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了React中拆分组件的相关知识,文中的示例代码讲解详细,对我们掌握React有一定的帮助,需要的小伙伴可以参考一下2023-12-12
Docker部署SpringBoot项目到云服务器的实现步骤
Docker作为一种轻量级的容器化技术，为开发者提供了快速、便捷的部署方案，本文主要介绍了Docker部署SpringBoot项目到云服务器，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了React 如何向url中添加参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在React中,受控组件指的是表单元素的value值受React组件的state或props控制的组件,而非受控组件则是表单元素的value值由DOM自身负责管理的组件,本文将给大家详细介绍React受控组件与非受控组件,需要的朋友可以参考下2023-08-08
最新评论