LoadableReact

    0

    0

    The code first creates two instances of the Loadable class. The first instance creates an instance of the AsyncOrder component, and the second instance creates an instance of the AsyncAccount component.

    The code next defines a new component, ConsoleIndex. The ConsoleIndex component will use the useRouteMatch() utility method to determine which routes to use. The code thenreturns two routes: one for the route path /order/, and one for the route path /account/.

    Library: react

    import React from 'react';
    import Loadable from 'react-loadable';
    import { Route, Switch, useRouteMatch } from 'react-router-dom';
    
    /* this is react-loadable example*/
    
    
    const AsyncAccount = new Loadable({
      loader: () => import(/* webpackChunkName: "order" */ './Order'),
      loading: () => [],
    });
    
    const AsyncAccount = new Loadable({
      loader: () => import(/* webpackChunkName: "account" */ './Account'),
      loading: () => [],
    });
    
    const ConsoleIndex = () => {
      const { url } = useRouteMatch();
      return (
        <Switch>
          <Route path={`${url}/order`} component={AsyncOrder} />
          <Route path={`${url}/account`} component={AsyncAccount} />
        </Switch>
      );
    };
    
    export default ConsoleIndex;
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.