5
自定义一个custom router
调用createBrowserHistory
并导出
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
export default history
创建custom router
const CustomRouter = ({ history, ...props }) => {
const [state, setState] = useState({
action: history.action,
location: history.location
})
useLayoutEffect(() => history.listen(setState), [history])
return (
<Router
{...props}
location={state.location}
navigationType={state.action}
navigator={history}
/>
)
}
修改组件内的BrowserRouter
// <Router history={history}>
<CustomRouter history={history}>
<div className="App">
<AuthProvider>
{/* <Link to={'/login'}>登陆</Link>
<Link to={'/home'}>首页</Link> */}
{/* 配置路由的规则 */}
<Routes>
<Route path="/" element={<Navigate to={'/login'} />}></Route>
<Route
path="/home"
element={
<RequireAuth>
<Layout />
</RequireAuth>
}
>
<Route path="" element={<Home />}></Route>
<Route path="list" element={<ArticleList />}></Route>
<Route path="publish" element={<ArticlePublish />}></Route>
</Route>
<Route path="/login" element={<Login />}></Route>
{/* 配置404组件 */}
<Route path="*" element={<NotFound />}></Route>
</Routes>
</AuthProvider>
</div>
{/* </Router> */}
</CustomRouter>
非组件内调用history进行跳转
// 如果token过期
if (err.response.status === 401) {
// 删除
// removeToken()
message.warn('登陆信息过期')
// 跳转到登陆页面
// window.location.href = '/login'
history.push('/')
}