React + TypeScipt + reduxjs/toolkit 手动输入历史选项卡
React + TypeScipt + reduxjs/toolkit 手动输入历史选项卡
历史标签页是用户在首页经过的历史路径。这个路由会用在菜单导航中，也会用到我们的历史标签组件中，也可以被其他组件使用，所以这里最好使用redux。保存，但是redux用起来比较麻烦，所以选择了reduxjs/toolkit最佳实践来写。
步
- 安装插件
- 在src目录下创建相关文件
- 定义数据
- 定义reduce函数
- 写历史标签组件
第一步
安装@reduxjs/toolkit
第二步
构建商店目录功能以编写具有不同功能的商店
index 是摘要导出文件
第三步
历史数据是一个有value属性和router属性的数组，用来保存路由名和路径
导出接口标签状态 {
值：字符串；
路由器：字符串
}
导出接口 IHistory{
历史列表：标签状态[]
}
常量初始状态 = {
历史列表：[{
价值：“头版”，
路由器：“/home”
}]
}
复制代码
第四步
IncreseHistory 是添加历史路由
deleteHistory 是删除历史路由
initHistory 是初始化历史路由
注意typescript的导出方式
导出 const historySlice = createSlice({
名称：“历史”，
初始状态，
减速机：{
增加历史：（状态，{payload}）=> {
常量 isint = 状态。历史列表。一些（项目=> {
归还物品。路由器 === 有效载荷。价值。路由器
})
如果（！isint）{
状态。历史列表。推（有效载荷。价值）
}
},
// 定义一个减法
deleteHistory: ( state, {payload} ) => {
安慰。日志（状态）
状态。历史列表。 forEach（（项目，索引）=> {
if(item.router === payload.value){
状态。历史列表。拼接（索引，1）
}
})
},
initHistroy : ( state, {payload} ) =>{
状态。历史列表 = 有效载荷。价值
}
}
})
出口常量 { 增加历史，删除历史，初始化历史 } = historySlice。行动；
// 默认导出
导出默认历史切片。减速器;
复制代码
index.ts 文件
从“@reduxjs/toolkit”导入 { configureStore }；
从“./features/counterSlice”导入 counterSlice；
从“./features/historySlice”导入historySlice；
// configureStore 创建一个 redux 数据
常量存储 = configureStore({
// 合并多个切片
减速机：{
计数器：counterSlice，
历史：historySlice
},
});
导出默认存储；
复制代码
步骤⑤
在历史标签组件中，自己定义样式，然后将数据绑定到自己的菜单菜单中。注意删除历史标签时，事件会冒泡到父元素，导航会冲突，所以要防止冒泡Bubble。
从“反应”导入反应，{ useEffect}；
导入 { useNavigate, useLocation } from 'react-router-dom';
从'react-redux'导入{useSelector，useDispatch}；
从 '../../store/features/historySlice' 导入 { deleteHistory,initHistroy }；
进口 {
关闭概述
} 来自“@ant-design/icons”；
导入“./index.css”
导出接口标签状态 {
值：字符串；
路由器：字符串
}
const HistoryTags：反应。 FC = () => {
//获取路线
常量 locationPath = useLocation()
常量导航 = useNavigate()
//获取状态中的历史路线
const { historyList } = useSelector( ( store: any ) => store.history)
常量调度 = useDispatch()
//获取浏览器缓存中的历史路由并初始化为状态
使用效果（（）=> {
常量 storeHistory = JSON。解析（sessionStorage.getItem（“historyList”）||'[]'）
调度（initHistory（{值：storeHistory}））
},[])
// 保存路由历史到浏览器
使用效果（（）=> {
窗户。 addEventListener("卸载前", () => {
会话存储。 setItem("historyList", JSON.stringify(historyList))
})
}, [历史列表])
//点击标签跳转到路由
常量导航路由器=（路径：字符串）=> {
导航（路径）
}
// 删除标签路由
const deleteRouter = ( e: any , path: string) => {
//停止冒泡
e.停止传播（）
//如果当前选中的路由被删除，则跳转回首页
如果（路径 === 位置路径。路径名）{
导航（“/家”）
}
调度（删除历史（{值：路径}））
}
返回 （
< div className = 'history-list' > { historyList.map((item: tagState) => { return ( < div className = {item.router === locationPath.pathname ? " active-tag-item " : " tag -item "} key = {item.router} onClick = {() => navigateRouter(item.router)}> {item.value} < span className = {item.router !== '/home' ?' tag- icon ' : " icon-none "} onClick = {(e) => deleteRouter(e, item.router)}> < CloseOutlined />
</ span >
</ div >) }) }</ div >
)
}
导出默认历史标签；
复制代码
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/1219/9277/1829
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
