navigation

bro.config.js

@@ -10,7 +10,8 @@ module.exports = {
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
     "nav1.main": "/nav1",
-    "nav1.": ""
+    "link.nav1.about": "/",
+    "link.nav1.profile": "/my-best-profile-page-ever"
   },
   features: {
     "nav1": {

src/__data__/urls.ts

@@ -0,0 +1,20 @@
+import { getNavigationsValue } from "@brojs/cli";
+import { generatePath } from "react-router-dom";
+
+const baseUrl = getNavigationsValue("nav1.main");
+
+export const URLs = {
+  profile: {
+    isOn: Boolean(getNavigationsValue("link.nav1.profile")),
+    url: `${baseUrl}${getNavigationsValue("link.nav1.profile")}`,
+    getUrl() {
+      return this.url;
+    },
+  },
+  about: {
+    url: `${baseUrl}${getNavigationsValue("link.nav1.about")}`,
+    getUrl() {
+      return this.url;
+    },
+  },
+};

src/app.tsx

@@ -5,7 +5,7 @@ import { Dashboard } from './dashboard';
 
 const App = () => {
   return (
-    <BrowserRouter basename='/nav1'>
+    <BrowserRouter>
       <Dashboard />
     </BrowserRouter>
   );

src/dashboard.tsx

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

src/pages/about.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import { URLs } from "../__data__/urls";
+
+export const AboutPage = () => {
+  return (
+    <div>
+      <h1>about page</h1>
+      {URLs.profile.isOn && <Link to={URLs.profile.getUrl()}>go to profile page</Link>}
+    </div>
+  );
+};

src/pages/profile.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import { URLs } from "../__data__/urls";
+
+export const ProfilePage = () => {
+  return (
+    <div>
+      <h1>profile page</h1>
+      <Link to={URLs.about.getUrl()}>go to about page</Link>
+    </div>
+  );
+};