当前位置：首页 > news >正文

react获取访问过的路由历史记录

news 来源：原创 2024/9/19 22:25:04

看了下，好像没有很好的解决方案，之前的useHistory现在也用不了了，

chatgpt说使用useMatch，也报错

看了下浏览器原生的。本来浏览器就会限制这个histroy的读取，只能获取length

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/history

那考虑useEffect每次在location.pathname 进行变化的时候，直接进行存取队列。～～自己手动做吧。


const RouterComponent = (router: any) => {const location = useLocation()// 每一次路由变化的时候，去更新useEffect(() => {store.dispatch(setLastRouter(location.pathname))}, [location.pathname])return (<><Routes>{routers.map((router) => (<Routepath={router.path}element={router.authentication ? (<Authentication>{router.element}</Authentication>) : (router.element)}key={router.path}></Route>))}</Routes></>)
}

然后

import { PayloadAction, createSlice } from "@reduxjs/toolkit"
import { RootState } from "./store"interface taskState {router: { lastRouter: null; currentRouter: null }
}
const initialState: taskState = {router: { lastRouter: null, currentRouter: null },
}export const taskSlice = createSlice({name: "task1111",initialState,reducers: {setLastRouter: (state, action: PayloadAction<any>) => {state.router.lastRouter= state.router.currentRouterstate.router.currentRouter = action.payload}},
})export const { setLastRouter } = taskSlice.actions
export const selectLastRouter = (state: RootState) => state.task.router.lastRouter
export default taskSlice.reducer

但是，发现有问题啊啊啊，store的更新是惰性的，

chatgpt说，可以给他强制更新，但好像又不太好，如果需要所有的历史长度，或许可以

this.forceUpdate(); // 强制重新渲染组件

或者包一个connect
export default connect(mapStateToProps, mapDispatchToProps, null, { shouldComponentUpdate: () => true })(Counter);

（未验证）

后来请教了下大神，实际上可以在组件销毁方法里去监听，原理和去监听路由一样的，而且这样可以更好的～去维护，不用浪费全局的router资源。

【销毁组件的方法就更简单了……直接useEffect里return出去就行，用的少竟然忘记掉了】

这样每次读去到type的时候，可以再去取消掉，有点类似订阅的机制，总之更好管理。

感叹一下还是得