全栈的自我修养 ———— react中router入门+路由懒加载

本文主要是介绍全栈的自我修养 ———— react中router入门+路由懒加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

下载router

npm install react-router-dom

配置view

如下将组件倒出

const Login = () => {return <div>这是登陆</div>
}
export default Login

创建目录

配置index.js

React.lazy有路由懒加载的功能，以免白屏、加载时间太长，
会看当前使用的组件，首先导入需要的，其他组件缓存加载！
fallback中也支持添加一个组件，这个组件在加载时候会出来显示

import { createBrowserRouter } from 'react-router-dom'
import { Suspense } from 'react';
import React from 'react';
const LazyLogin = React.lazy(() => import('../view/Login'));
const LazyIndex = React.lazy(() => import('../view/Index'));
const router = createBrowserRouter([{path: '/',element: (<Suspense fallback={<div>Loading...</div>}><LazyLogin></LazyLogin></Suspense>)},{path: '/login',element: (<Suspense fallback={<div>Loading...</div>}><LazyLogin></LazyLogin></Suspense>)},{path: '/index',element: (<Suspense fallback={<div>Loading...</div>}><LazyIndex></LazyIndex></Suspense>)}
]);export default router;

这篇关于全栈的自我修养 ———— react中router入门+路由懒加载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---