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

看了下，好像没有很好的解决方案，之前的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) => (
          <Route
            path={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.currentRouter
      state.router.currentRouter = action.payload
    }
    
  },
})

export const { setLastRouter } = taskSlice.actions
export const selectLastRouter = (state: RootState) => state.task.router.lastRouter
export default taskSlice.reducer

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

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

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

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

感叹一下还是得

===============================================================

更新：

后来发现上面的其实不对，emmm，不能更新是因为，太深度了，而且我写了两层，反而获取不到，正确的做法。是用JSON.parse和JSON.stringify做一个强行更新

 setLastRouter: (state, action: PayloadAction<any>) => {
      state.router = JSON.parse(JSON.stringify(state.router))
      state.router.lastRouter = action.payload
    }

这样就能获取到了，也不需要监听退出

使用方法是

const lastRouter = useAppSelector(selectLastRouter)

if (lastRouter === "/chat" ) {

// .. 具体逻辑

}

还有就是之前觉得更新不及时所以设置了一个lastrouter和currentRouter，但实际上还是只用那个lastrouter一个就好了

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

悦读