react路由懒加载 白屏问题 ，在非组件中的获取路由信息跳转

react 路由 懒加载 动态渲染路由

1. 首先懒加载必要必要组件 Suspense必要方法lazy(没有加载不出来)。
2. 用Suspense标签包裹Routes标签 fallback是路由未加载出来的占位显示组件(就是一个react 可以随便写样式)。
3. 导入 lazy 函数，懒加载方式导入路由组件。

注意！！
Suspense与 lazy 必须配合使用，为了不必要的麻烦 所有组件都换成lazy 方式引入。(layout 也是也是 我在这上面浪费了好久 就是layout没有用 每次渲染都是白屏) 只要是懒加载的路由 外面必须有Suspense 否则也是白屏

// 导入必要组件
import { lazy, Suspense } from ‘react'
import {BrowserRouter as Router,useRoutes} from "react-router-dom";
const Login = lazy(() => import('./pages/Login'))//懒加载方式
const Layout= lazy(() => import('./pages/Layout'))//懒加载方式
const home= lazy(() => import('./pages/home'))//懒加载方式
function App () {
return (
<Router>
	<Suspense fallback={<div>loading...</div>}>
		<Routes>   
			<Route path="/login" element={<Login />} />
			<Route path="/" element={<Layout/>} >
				<Route path="/home" element={<home/>} />
			</Route >	 	
		</Routes>
	</Suspense>
</Router>
)
}

export default App

在非组件中使用路由跳转

//页面跳转的封装。。
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

import { history } from "./history";
history.push("/login")