lazy load + nav2 link

bro.config.js

@@ -11,7 +11,8 @@ module.exports = {
   navigations: {
     "nav1.main": "/nav1",
     "link.nav1.about": "/",
-    "link.nav1.profile": "/my-best-profile-page-ever"
+    "link.nav1.profile": "/my-best-profile-page-ever",
+    "nav2.main": "/nav2",
   },
   features: {
     "nav1": {

package-lock.json

@@ -10,6 +10,8 @@
             "license": "ISC",
             "dependencies": {
                 "@brojs/cli": "^1.3.0",
+                "@types/react": "^18.3.12",
+                "@types/react-dom": "^18.3.1",
                 "express": "^4.19.2",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
@@ -2052,6 +2054,31 @@
             "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
             "license": "MIT"
         },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.13",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+            "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/react": {
+            "version": "18.3.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
+            "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@types/react-dom": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.12.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -2999,6 +3026,12 @@
                 "node": ">=4"
             }
         },
+        "node_modules/csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+            "license": "MIT"
+        },
         "node_modules/debug": {
             "version": "4.3.7",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",

package.json

@@ -15,6 +15,8 @@
     "description": "",
     "dependencies": {
         "@brojs/cli": "^1.3.0",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
         "express": "^4.19.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

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>
   );
 };