react路由懒加载的方法、react在非组件环境下拿到路由信息进行页面跳转的方法

react路由懒加载的办法

1. 在 App 组件中，导入 Suspense 组件
2. 在 路由BrowserRouter 内部，使用 Suspense 组件包裹组件内容
3. 为 Suspense 组件提供 fallback 属性，指定 loading 占位内容（需要的样式可在Suspense进行详写）
4. 导入 lazy 函数，并修改为懒加载方式导入路由组件

// 导入必要组件
import { lazy, Suspense } from ‘react'
// 按需导入路由组件
// import Article from '@/pages/Article'原导入方法
const Login = lazy(() => import('./pages/Login'))//懒加载方式

function App () {
return (
<BrowserRouter>
<Suspense fallback={<div style={{textAlign: 'center', marginTop: 200 }}>loading...</div>}>
<Routes>
 <Route path="/login" element={<Login />} />
</Routes>
</Suspense>
</BrowserRouter>
)
}

export default App

react在非组件环境下拿到路由信息进行页面跳转的方法

这类一般都是在react路由拦截时需要用到，以下以token失效为例

1. 创建 utils/history.js文件
2. 在app.js中使用我们新建的路由并配置history参数
3. 通过响应拦截器处理 token 失效，如果发现是401调回到登录页

//utlis/history.js
// https://github.com/remix-run/react-router/issues/8264
//页面跳转的封装。。
import { createBrowserHistory } from 'history'
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
const history = createBrowserHistory()

export {
HistoryRouter,//在App.js中代替<BrowserRouter><BrowserRouter/>
history
}

//app.js
import { HistoryRouter, history } from './utils/history'
function App () {
return (
<HistoryRouter history={history}>
<Routes>
</Routes>
</HistoryRouter>
)
}

export default App

//utlis/http.js
import { history } from "./history";
// 添加响应拦截器
http.interceptors.response.use((response) => {
    return response.data
}, (error) => {
    if (error.response.status === 401) {
        history.push("/login")
    }
    return Promise.reject(error)
})
export { http }