react-boilerplate#15:fixed lazy loading add route card

src/app/components/Card/index.tsx

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
 import Icon from '../icons';
-import ProductIon from 'app/pages/MyHomePage/components/assets/1.jpg';
 import { Span } from '../Span/inedx';
 import { mapCardLabel } from '../CardLabel';
-import { ICard, ETxtOnline, ELabel, EResultLabel } from 'types/Card';
+import { ICard } from 'types/Card';
 import { CardTxtOnline } from './components/card-txt-online';
 import { currencyVND } from 'utils/string';
 import { ResultLabel } from './components/resultLabel';

src/app/components/Header/index.tsx

@@ -5,8 +5,10 @@ import { media } from 'styles/media';
 import { ReactComponent as MoreIcon } from './assets/more.svg';
 import Menu from './Menu';
 import { Container } from '../container';
+import { useNavigate } from 'react-router-dom';
 
 export default function MyHeader() {
+  const navigate = useNavigate();
   return (
     <HeaderWrapper>
       <HeaderDiv>
@@ -18,6 +20,7 @@ export default function MyHeader() {
               width="240px"
               height="40px"
               className="header__brand"
+              onClick={() => navigate('/')}
             />
 
             <Menu />
@@ -32,7 +35,10 @@ export default function MyHeader() {
                 <Icon position="-82px -221px" width="24px" height="24px" />
                 Đăng nhập
               </HeaderButton>
-              <HeaderButton className="header__card">
+              <HeaderButton
+                className="header__card"
+                onClick={() => navigate('/card')}
+              >
                 <Icon position="-108px -221px" width="24px" height="24px" />
                 Giỏ Hàng
               </HeaderButton>

src/app/index.tsx

@@ -9,14 +9,14 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-
 import { GlobalStyle } from 'styles/global-styles';
-
-import { HomePage } from './pages/HomePage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
 import { useTranslation } from 'react-i18next';
 import { MyHomePage } from './pages/MyHomePage';
-import { MainLayout } from './layout';
+import { MainLayout } from './layout/main-layout';
+import { NoFooterLayout } from './layout/no-footer';
+import { CardPage } from './pages/CardPage';
+import AppRoutes from './routes';
 
 export function App() {
   const { i18n } = useTranslation();
@@ -29,17 +29,7 @@ export function App() {
       >
         <meta name="description" content="A React Boilerplate application" />
       </Helmet>
-
-      <Routes>
-        {/* <Route path="/" element={<MyHomePage />} /> */}
-        {/* <Route path="/homepage-template" element={<HomePage />} />
-        <Route path="*" element={<NotFoundPage />} /> */}
-
-        <Route path="/" element={<MainLayout />}>
-          <Route index element={<MyHomePage />} />
-        </Route>
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
+      <AppRoutes />
       <GlobalStyle />
     </BrowserRouter>
   );

src/app/layout/no-footer.tsx

@@ -0,0 +1,14 @@
+import MyHeader from 'app/components/Header';
+import { Main } from 'app/components/Main';
+import { Outlet } from 'react-router-dom';
+
+export const NoFooterLayout = () => {
+  return (
+    <>
+      <MyHeader />
+      <Main>
+        <Outlet />
+      </Main>
+    </>
+  );
+};

src/app/pages/CardPage/Loadable.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { lazyLoad } from 'utils/loadable';
+import { LoadingIndicator } from 'app/components/LoadingIndicator';
+import styled from 'styled-components/macro';
+
+const LoadingWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const LZCardPage = lazyLoad(
+  () => import('./index'),
+  module => module.CardPage,
+  {
+    fallback: (
+      <LoadingWrapper>
+        <LoadingIndicator />
+      </LoadingWrapper>
+    ),
+  },
+);

src/app/pages/CardPage/index.tsx

@@ -0,0 +1,18 @@
+import { Helmet } from 'react-helmet-async';
+
+export function CardPage() {
+  return (
+    <>
+      <Helmet>
+        <title>Giỏ hàng</title>
+        <meta name="description" content="Giỏ hàng" />
+      </Helmet>
+      <div>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem natus
+        dolor ullam rerum amet. Modi officiis ratione ullam numquam totam
+        expedita ducimus iusto, molestiae quasi autem voluptatum repellat
+        minima? Voluptas?
+      </div>
+    </>
+  );
+}

src/app/pages/MyHomePage/Loadable.tsx

@@ -11,7 +11,7 @@ const LoadingWrapper = styled.div`
   justify-content: center;
 `;
 
-export const MyHomePage = lazyLoad(
+export const LZMyHomePage = lazyLoad(
   () => import('./index'),
   module => module.MyHomePage,
   {

src/app/pages/NotFoundPage/index.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styled from 'styled-components/macro';
 import { P } from './P';
 import { Link } from 'app/components/Link';
-import { NavBar } from 'app/components/NavBar';
 import { Helmet } from 'react-helmet-async';
 import { StyleConstants } from 'styles/StyleConstants';
 
@@ -13,7 +12,6 @@ export function NotFoundPage() {
         <title>404 Page Not Found</title>
         <meta name="description" content="Page not found" />
       </Helmet>
-      <NavBar />
       <Wrapper>
         <Title>
           4

src/app/routes.tsx

@@ -0,0 +1,28 @@
+import { MainLayout } from './layout/main-layout';
+import { NotFoundPage } from './pages/NotFoundPage';
+import { LZMyHomePage } from './pages/MyHomePage/Loadable';
+import { NoFooterLayout } from './layout/no-footer';
+import { LZCardPage } from './pages/CardPage/Loadable';
+import { RouteObject, useRoutes } from 'react-router-dom';
+import React from 'react';
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [{ index: true, element: <LZMyHomePage /> }],
+  },
+  {
+    path: '/card',
+    element: <NoFooterLayout />,
+    children: [{ index: true, element: <LZCardPage /> }],
+  },
+  { path: '*', element: <NotFoundPage /> },
+];
+
+const AppRoutes: React.FC = () => {
+  const element = useRoutes(routes);
+  return element;
+};
+
+export default AppRoutes;