react+ts关于history组件

`
// 安装:yarn add history
// 创建 router/history.js 文件
// 在该文件中,创建一个 hisotry 对象并导出
// 携带参数
// 在入口index.js 中导入 history 对象,并设置为 Router 的 history
// 通过响应拦截器处理 token 失效
import { useState, useLayoutEffect, FC } from 'react'
import { createBrowserHistory, createHashHistory } from 'history'
import { HistoryRouterProps, Router } from 'react-router-dom'
export const history = createBrowserHistory()

export const HistoryRouter: FC = ({
children,
history,
}) => {
const [state, setState] = useState({
action: history.action,
location: history.location,
})

useLayoutEffect(() => {
history.listen(setState)
}, [history])

return <Router children={children} navigator={history} {...state} />
}

`

posted @ 2022-11-10 22:40  jialiangzai  阅读(288)  评论(0)    收藏  举报