zoukankan      html  css  js  c++  java
  • react-router 4.x 路由按需加载

    react-router 4 代码分割(按需加载) 官方文档  https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

    1.未采用路由按需加载的代码

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Route , BrowserRouter, Switch } from 'react-router-dom';
    import {Provider} from 'react-redux';
    import './config/rem.js';
    import registerServiceWorker from './registerServiceWorker';
    import Loadable from 'react-loadable';
    import {store} from './redux/store/store';
    import  './style/common.scss';
    import Home from './page/home/';
    import Welcome from './page/welcome/';
    import Login from './page/login/';
    import Store from './page/store/';
    import User from './page/user/';
    import Error from './page/error';
    
    
    const routes = [
                    { path: '/', component: Home, exact: true },
                    { path: '/login', component: Login },
                    { path: '/welcome', component: Welcome },
                    { path: '/store', component: Store },
                    { path: '/user', component: User }
                ]
    
    ReactDOM.render(
        <Provider store={store}>
            <BrowserRouter>
                <div className="router-page">       
                       <Switch>
                        {
                            routes.map(route => (
                                <Route key={route.path} path={route.path} component={route.component}  exact={route.exact} />
                            ))
                        }
                        <Route component={ Error } />
                    </Switch>
                </div>
            </BrowserRouter>
        </Provider>,
        document.getElementById('root')
    );
    registerServiceWorker();

    2.采用 react-loadable 来实现路由按需加载

    cnpm install --save react-loadable
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Route , BrowserRouter, Switch } from 'react-router-dom';
    import {Provider} from 'react-redux';
    import './config/rem.js';
    import registerServiceWorker from './registerServiceWorker';
    import Loadable from 'react-loadable';
    import {store} from './redux/store/store';
    import  './style/common.scss';
    
    const MyLoadingComponent = ({ isLoading, error }) => {
        if (isLoading) {
            return <div>Loading...</div>
        }
        else if (error) {
            return <div>Sorry, there was a problem loading the page.</div>
        }
        else {
            return null;
        }
    };
    
    const AsyncHome = Loadable({
        loader: () => import('./page/home/'),
        loading: MyLoadingComponent
    });
    const AsyncWelcome = Loadable({
        loader: () => import('./page/welcome/'),
        loading: MyLoadingComponent
    });
    const AsyncLogin = Loadable({
        loader: () => import('./page/login/'),
        loading: MyLoadingComponent
    });
    const AsyncStore = Loadable({
        loader: () => import('./page/store/'),
        loading: MyLoadingComponent
    });
    const AsyncUser = Loadable({
        loader: () => import('./page/user/'),
        loading: MyLoadingComponent
    });
    const AsyncCheckAuth = Loadable({
        loader: () => import('./page/checkAuth/'),
        loading: MyLoadingComponent
    });
    const AsyncError= Loadable({
        loader: () => import('./page/error'),
        loading: MyLoadingComponent
    });
    
    const routes = [
                    { path: '/', component: AsyncHome, exact: true },
                    { path: '/login', component: AsyncLogin },
                    { path: '/welcome', component: AsyncWelcome },
                    { path: '/store', component: AsyncStore },
                    { path: '/user', component: AsyncUser }
                ]
    
    
    ReactDOM.render(
        <Provider store={store}>
            <BrowserRouter>
                <div className="router-page">
           
                       <Switch>
                        {
                            routes.map(route => (
                                <Route key={route.path} path={route.path} component={route.component}  exact={route.exact} />
                            ))
                        }
                        <Route component={ Error } />
                    </Switch>
                </div>
            </BrowserRouter>
        </Provider>,
        document.getElementById('root')
    );
    registerServiceWorker();

    ok,以上就能轻松实现路由的按需加载

  • 相关阅读:
    利用flashBack恢复误删除(delete)的表数据
    [原创] [YCM] YouCompleteMe安装完全指南
    关于dll的一点收获
    could not deduce template argument for 'const std::_Tree<_Traits> &' from 'const std::string'
    化不利为有利
    突破软件试用期的"土方法"
    网络求职的成功率一般2个月是发1000份简历,有8份面试,2份成功,一个是你不想去的,另一个可能是你相对满意的。
    一个简易的dota改键助手
    linux 版本控制服务-git
    django modelform模块
  • 原文地址:https://www.cnblogs.com/zhuzeliang/p/9110400.html
Copyright © 2011-2022 走看看