lazy load + nav2 link

src/dashboard.tsx

@@ -1,16 +1,34 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
 
 import { URLs } from "./__data__/urls";
-import { ProfilePage } from './pages/profile'
-import { AboutPage } from "./pages/about";
+import { ProfilePage, AboutPage } from "./pages";
 
+const PageWrapper = ({ children }) => (
+  <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+);
 
 export const Dashboard = () => {
   return (
     <Routes>
-      <Route path={URLs.about.url} element={<AboutPage />} />
-      {URLs.profile.isOn && <Route path={URLs.profile.url} element={<ProfilePage />} />}
+      <Route
+        path={URLs.about.url}
+        element={
+          <PageWrapper>
+            <AboutPage />
+          </PageWrapper>
+        }
+      />
+      {URLs.profile.isOn && (
+        <Route
+          path={URLs.profile.url}
+          element={
+            <PageWrapper>
+              <ProfilePage />
+            </PageWrapper>
+          }
+        />
+      )}
 
       <Route path="*" element={<div>Not found</div>} />
     </Routes>

src/pages/about/about.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import { URLs } from "../__data__/urls";
+import { URLs } from "../../__data__/urls";
 
 export const AboutPage = () => {
   return (

src/pages/about/index.ts

@@ -0,0 +1,3 @@
+import { AboutPage } from './about';
+
+export default AboutPage;

src/pages/index.ts

@@ -0,0 +1,4 @@
+import { lazy } from 'react'
+
+export const AboutPage = lazy(() => import(/* webpackChunkName: "about" */ './about'))
+export const ProfilePage = lazy(() => import(/* webpackChunkName: "profile" */ './profile'))

src/pages/profile/index.ts

@@ -0,0 +1,3 @@
+import { ProfilePage } from "./profile";
+
+export default ProfilePage;

src/pages/profile/profile.tsx

@@ -1,13 +1,18 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import { URLs } from "../__data__/urls";
+import { URLs } from "../../__data__/urls";
+import { getNavigationsValue } from "@brojs/cli";
 
 export const ProfilePage = () => {
   return (
     <div>
       <h1>profile page</h1>
       <Link to={URLs.about.getUrl()}>go to about page</Link>
+
+      <div>
+        <a href={getNavigationsValue('nav2.main')}>edit profile</a>
+      </div>
     </div>
   );
 };