Move strict mode to page component

src/components/Page.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, type PropsWithChildren, type HTMLAttributes, useEffect, useRef } from 'react';
+import React, { type FC, type PropsWithChildren, type HTMLAttributes, useEffect, useRef, StrictMode } from 'react';
 
 import viewManager from './viewManager/viewManager';
 
@@ -57,18 +57,20 @@ const Page: FC<PropsWithChildren<PageProps & HTMLAttributes<HTMLDivElement>>> =
     }, [ element, isNowPlayingBarEnabled, isThemeMediaSupported ]);
 
     return (
-        <div
+        <StrictMode>
-            ref={element}
+            <div
-            id={id}
+                ref={element}
-            data-role='page'
+                id={id}
-            className={`page ${className}`}
+                data-role='page'
-            data-title={title}
+                className={`page ${className}`}
-            data-backbutton={isBackButtonEnabled}
+                data-title={title}
-            data-menubutton={isMenuButtonEnabled}
+                data-backbutton={isBackButtonEnabled}
-            data-backdroptype={backDropType}
+                data-menubutton={isMenuButtonEnabled}
-        >
+                data-backdroptype={backDropType}
-            {children}
+            >
-        </div>
+                {children}
+            </div>
+        </StrictMode>
     );
 };
 

src/components/router/AsyncRoute.tsx

@@ -1,4 +1,3 @@
-import React, { StrictMode } from 'react';
 import type { RouteObject } from 'react-router-dom';
 
 export enum AsyncRouteType {
@@ -19,7 +18,7 @@ export interface AsyncRoute {
     type?: AsyncRouteType
 }
 
-const importPage = (page: string, type: AsyncRouteType) => {
+const importRoute = (page: string, type: AsyncRouteType) => {
     switch (type) {
         case AsyncRouteType.Dashboard:
             return import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/routes/${page}`);
@@ -38,14 +37,16 @@ export const toAsyncPageRoute = ({
     return {
         path,
         lazy: async () => {
-            const { default: Page } = await importPage(page ?? path, type);
+            const { default: route } = await importRoute(page ?? path, type);
-            return {
+
-                element: (
+            // If route is not a RouteObject, use it as the Component
-                    <StrictMode>
+            if (!route.Component) {
-                        <Page />
+                return {
-                    </StrictMode>
+                    Component: route
-                )
+                };
-            };
+            }
+
+            return route;
         }
     };
 };