看了下,好像没有很好的解决方案,之前的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的时候,可以再去取消掉,有点类似订阅的机制,总之更好管理。
感叹一下还是得