React学习（懒加载）

学习目标：

提示：10分钟学会组件懒加载

（1） 路由懒加载

SPA应用中，为了优化首页加载和渲染性能，让路由页面组件按需访问加载

解决方案：路由懒加载

代码操作：编辑App.jsx

import './App.css';
// 引入页面组件
import Login from "./views/pages/Login"
import Reg from "./views/pages/Reg"
import {BrowserRouter as Router, NavLink, Redirect, Route, Switch} from "react-router-dom"
import NotFound from "./views/pages/NotFound";
// 导入懒加载模块
import {lazy, Suspense} from "react"

// 懒加载导入模块
const Layout = lazy(() => import("./views/pages/Layout"))
function App() {
  return (
    <div className="App">
      {/*使用页面组件*/}
      {/*<Brands/>*/}
      {/*<Parent/>*/}

        <Router>
            {/*页面导航*/}
            <nav>
              <span><NavLink to="/" exact>LOGO</NavLink></span>
              <span><NavLink to="/layout">首页</NavLink></span>
              <span><NavLink to="/login">登录</NavLink></span>
              <span><NavLink to="/reg">注册</NavLink></span>
            </nav>

            <Suspense fallback="loading">
                <Switch>
                    {/*  路由规则*/}
                    <Route path="/" exact>
                        {/*重定向方法1*/}
                        <Redirect to="/reg"/>
                    </Route>
                    {/*重定向方法2*/}
                    {/*<Redirect path="/" to="login"/>*/}
                    <Route path="/layout" component={Layout}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/reg" component={Reg}/>
                    <Route path="*" component={NotFound}/>
                </Switch>
            </Suspense>


        </Router>
    </div>
  );
}

export default App;