nest routes

src/pages/restaurant/page.tsx

@@ -13,12 +13,13 @@ import RestaurantServices from "./RestaurantServices";
 import Ads1 from "components/Ads/Ads1";
 import { Loader } from "components/Loader/Loader";
 import { useRestaurant } from "hooks/useRestaurant";
-import { useParams } from "react-router-dom";
+import { useParams, Outlet, useLocation } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import LocalStorageHandler from "../menu/components/LocalStorageHandler";
 
 export default function RestaurantPage() {
   const param = useParams();
+  const { pathname } = useLocation();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery("595", {
     skip: !param.id,
@@ -39,6 +40,8 @@ export default function RestaurantPage() {
     localStorage.setItem("restaurantID", restaurant.restautantId);
   }
 
+  if (param.id && !pathname.endsWith(param.id)) return <Outlet />;
+
   return (
     <>
       <div className={styles.languageSwitch}>

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 />,
+      },
+    ],
   },
 
   {