text: import {BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
  import React, {Suspense, lazy, Fragment} from 'react';
  
  import {
      ToastContainer,
  } from 'react-toastify';
  
  const Dashboards = lazy(() => import('../../DemoPages/Dashboards'));
  
  const Widgets = lazy(() => import('../../DemoPages/Widgets'));
  const Elements = lazy(() => import('../../DemoPages/Elements'));
  const Components = lazy(() => import('../../DemoPages/Components'));
  const Charts = lazy(() => import('../../DemoPages/Charts'));
  const Forms = lazy(() => import('../../DemoPages/Forms'));
  const Tables = lazy(() => import('../../DemoPages/Tables'));
  
  const AppMain = () => {
  
      return (
          <Fragment>
  
              {/* Components */}
  
              <Suspense fallback={
                  <div className="loader-container">
                      <div className="loader-container-inner">
                          <h6 className="mt-5">
                              <small>Loading!</small>
                          </h6>
                      </div>
                  </div>
              }>
                  <Route path="/components" component={Components}/>
              </Suspense>
  
              {/* Forms */}
  
              <Suspense fallback={
                  <div className="loader-container">
                      <div className="loader-container-inner">
                          <h6 className="mt-5">
                          <small>Loading!</small>
                          </h6>
                      </div>
                  </div>
              }>
                  <Route path="/forms" component={Forms}/>
              </Suspense>
  
              {/* Charts */}
  
              <Suspense fallback={
                  <div className="loader-container">
                      <div className="loader-container-inner">
                          <h6 className="mt-3">
                          <small>Loading!</small>
                          </h6>
                      </div>
                  </div>
              }>
                  <Route path="/charts" component={Charts}/>
              </Suspense>
  
              {/* Tables */}
  
              <Suspense fallback={
                  <div className="loader-container">
                      <div className="loader-container-inner">
                          <h6 className="mt-5">
                          <small>Loading!</small>
                          </h6>
                      </div>
                  </div>
              }>
                  <Route path="/tables" component={Tables}/>
              </Suspense>
  
              {/* Elements */}
  
              <Suspense fallback={
                  <div className="loader-container">
                      <div className="loader-container-inner">
                          <h6 className="mt-3">
                          <small>Loading!</small>
                          </h6>
                      </div>
                  </div>
              }>
                  <Route path="/elements" component={Elements}/>
              </Suspense>
  
              {/* Dashboard Widgets */}
  
              <Suspense fallback={
                  <div className="loader-container">
                      <div className="loader-container-inner">
                          <h6 className="mt-3">
                          <small>Loading!</small>
                          </h6>
                      </div>
                  </div>
              }>
                  <Route path="/widgets" component={Widgets}/>
              </Suspense>
  
              {/* Dashboards */}
  
              <Suspense fallback={
                  <div className="loader-container">
                      <div className="loader-container-inner">
                          <h6 className="mt-3">
                          <small>Loading!</small>
                          </h6>
                      </div>
                  </div>
              }>
                  <Route path="/dashboards" component={Dashboards}/>
              </Suspense>
  
              <Route exact path="/" render={() => (
                  <Redirect to="/elements/simple-cards"/>
              )}/>
              <ToastContainer/>
          </Fragment>
      )
  };
  
  export default AppMain;