router
- 下载router
- 配置view
- 创建目录
- 配置index.js
下载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;