nest routes

src/routes/routes.tsx

@@ -17,7 +17,7 @@ import SearchPage from "pages/search/page";
 import SplitBillPage from "pages/split-bill/page";
 import React, { ReactNode, Suspense, useEffect } from "react";
 import { createHashRouter, useLocation } from "react-router-dom";
-import { Error400Page, ErrorPage } from "../pages/errors";
+import { Error400Page, ErrorPage } from "pages/errors";
 
 const { useBreakpoint } = Grid;
 
@@ -58,93 +58,90 @@ export const router = createHashRouter([
     element: <PageWrapper children={<RestaurantPage />} />,
     errorElement: <ErrorPage />,
   },
-
   {
     path: "/:id",
     element: <PageWrapper children={<RestaurantPage />} />,
     errorElement: <ErrorPage />,
-  },
+    children: [
+      {
+        path: "menu",
+        element: <PageWrapper children={<MenuPage />} />,
+        errorElement: <ErrorPage />,
+      },
+      {
+        path: "cart",
+        element: (
+          <PageWrapper
+            children={
+              <AppLayout>
+                <CartPage />
+              </AppLayout>
+            }
+          />
+        ),
+        errorElement: <ErrorPage />,
+      },
 
-  {
-    path: "/:id/menu",
-    element: <PageWrapper children={<MenuPage />} />,
-    errorElement: <ErrorPage />,
-  },
+      {
+        path: "address",
+        element: <PageWrapper children={<AddressPage />} />,
+        errorElement: <ErrorPage />,
+      },
 
-  {
-    path: "/:id/cart",
-    element: (
-      <PageWrapper
-        children={
-          <AppLayout>
-            <CartPage />
-          </AppLayout>
-        }
-      />
-    ),
-    errorElement: <ErrorPage />,
-  },
+      {
+        path: "checkout",
+        element: <PageWrapper children={<CheckoutPage />} />,
+        errorElement: <ErrorPage />,
+      },
+      {
+        path: "split-bill",
+        element: <PageWrapper children={<SplitBillPage />} />,
+        errorElement: <ErrorPage />,
+      },
 
-  {
-    path: "/:id/address",
-    element: <PageWrapper children={<AddressPage />} />,
-    errorElement: <ErrorPage />,
-  },
+      {
+        path: "product/:productId",
+        element: <PageWrapper children={<ProductDetailPage />} />,
+        errorElement: <ErrorPage />,
+      },
 
-  {
-    path: "/:id/checkout",
-    element: <PageWrapper children={<CheckoutPage />} />,
-    errorElement: <ErrorPage />,
-  },
+      {
+        path: "search",
+        element: <PageWrapper children={<SearchPage />} />,
+        errorElement: <ErrorPage />,
+      },
 
-  {
-    path: "/:id/split-bill",
-    element: <PageWrapper children={<SplitBillPage />} />,
-    errorElement: <ErrorPage />,
-  },
+      {
+        path: "orders",
+        element: (
+          <PageWrapper
+            children={
+              <PrivateRoute>
+                <OrdersPage />
+              </PrivateRoute>
+            }
+          />
+        ),
+        errorElement: <ErrorPage />,
+      },
+      {
+        path: "login",
+        element: <PageWrapper children={<LoginPage />} />,
+        errorElement: <ErrorPage />,
+      },
 
-  {
-    path: "/:id/product/:productId",
-    element: <PageWrapper children={<ProductDetailPage />} />,
-    errorElement: <ErrorPage />,
-  },
+      {
+        path: "otp",
+        element: <PageWrapper children={<OtpPage />} />,
+        errorElement: <ErrorPage />,
+      },
 
-  {
-    path: "/:id/search",
-    element: <PageWrapper children={<SearchPage />} />,
-    errorElement: <ErrorPage />,
-  },
-
-  {
-    path: "/:id/orders",
-    element: (
-      <PageWrapper
-        children={
-          <PrivateRoute>
-            <OrdersPage />
-          </PrivateRoute>
-        }
-      />
-    ),
-    errorElement: <ErrorPage />,
-  },
-
-  {
-    path: "/:id/login",
-    element: <PageWrapper children={<LoginPage />} />,
-    errorElement: <ErrorPage />,
-  },
-
-  {
-    path: "/:id/otp",
-    element: <PageWrapper children={<OtpPage />} />,
-    errorElement: <ErrorPage />,
-  },
-
-  {
-    path: "/:id/order/:orderId",
-    element: <PageWrapper children={<OrderPage />} />,
-    errorElement: <ErrorPage />,
+      {
+        path: "order/:orderId",
+        element: <PageWrapper children={<OrderPage />} />,
+        errorElement: <ErrorPage />,
+      },
+    ],
   },
 
   {