src/App.tsx

@@ -7,7 +7,8 @@ import {
   appPrivateRoutes,
   appPublicRoutes,
   privateRoutes,
-  publicRoutes
+  publicRoutes,
+  recursiveRouteRenderer
 } from './routes'
 import { State } from './store/rootReducer'
 import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
@@ -48,39 +49,28 @@ const App = () => {
     return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
   }
 
+  const publicRoutesList = recursiveRouteRenderer({
+    routes: publicRoutes,
+    renderConditionCallback: (r) => {
+      if (authState?.loggedIn) {
+        if (!r.hiddenWhenLoggedIn) {
+          return true
+        }
+      } else {
+        return true
+      }
+
+      return false
+    }
+  })
+
+  const privateRouteList = recursiveRouteRenderer({ routes: privateRoutes })
+
   return (
     <Routes>
       <Route element={<MainLayout />}>
-        {authState?.loggedIn &&
-          privateRoutes.map((route, index) => (
-            <Route
-              key={route.path + index}
-              path={route.path}
-              element={route.element}
-            />
-          ))}
-        {publicRoutes.map((route, index) => {
-          if (authState?.loggedIn) {
-            if (!route.hiddenWhenLoggedIn) {
-              return (
-                <Route
-                  key={route.path + index}
-                  path={route.path}
-                  element={route.element}
-                />
-              )
-            }
-          } else {
-            return (
-              <Route
-                key={route.path + index}
-                path={route.path}
-                element={route.element}
-              />
-            )
-          }
-        })}
-
+        {authState?.loggedIn && privateRouteList}
+        {publicRoutesList}
         <Route path="*" element={<Navigate to={handleRootRedirect()} />} />
       </Route>
     </Routes>

src/pages/landing/LandingPage.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/material'
 import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { appPublicRoutes } from '../../routes'
 import { State } from '../../store/rootReducer'
 import { saveVisitedLink } from '../../utils'
@@ -279,6 +279,7 @@ export const LandingPage = () => {
             </Typography>
           </Box>
           )} */}
+      <Outlet />
     </Container>
   )
 }

src/routes/index.tsx

@@ -10,6 +10,7 @@ import { RelaysPage } from '../pages/settings/relays'
 import { SignPage } from '../pages/sign'
 import { VerifyPage } from '../pages/verify'
 import { hexToNpub } from '../utils'
+import { Route, RouteProps } from 'react-router-dom'
 
 export const appPrivateRoutes = {
   homePage: '/',
@@ -35,16 +36,54 @@ export const getProfileRoute = (hexKey: string) =>
 export const getProfileSettingsRoute = (hexKey: string) =>
   appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))
 
-export const publicRoutes = [
+type CustomRouteProps<T> = T &
+  Omit<RouteProps, 'children'> & {
+    children?: Array<CustomRouteProps<T>>
+  }
+
+interface CustomRoutes<T> {
+  routes?: CustomRouteProps<T>[]
+  renderConditionCallback?: (route: CustomRouteProps<T>) => boolean
+}
+
+type PublicRouteProps = CustomRouteProps<{
+  hiddenWhenLoggedIn?: boolean
+}>
+
+export function recursiveRouteRenderer<T>({
+  routes,
+  renderConditionCallback = () => true
+}: CustomRoutes<T>) {
+  if (!routes) return null
+
+  return routes.map((route, index) =>
+    renderConditionCallback(route) ? (
+      <Route
+        key={`${route.path}${index}`}
+        path={route.path}
+        element={route.element}
+      >
+        {recursiveRouteRenderer({
+          routes: route.children,
+          renderConditionCallback
+        })}
+      </Route>
+    ) : null
+  )
+}
+
+export const publicRoutes: PublicRouteProps[] = [
   {
     path: appPublicRoutes.landingPage,
     hiddenWhenLoggedIn: true,
-    element: <LandingPage />
-  },
+    element: <LandingPage />,
+    children: [
       {
         path: appPublicRoutes.login,
         hiddenWhenLoggedIn: true,
         element: <Login />
+      }
+    ]
   },
   {
     path: appPublicRoutes.profile,