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,21 +58,18 @@ export const router = createHashRouter([
     element: <PageWrapper children={<RestaurantPage />} />,
     errorElement: <ErrorPage />,
   },
-
   {
     path: "/:id",
     element: <PageWrapper children={<RestaurantPage />} />,
     errorElement: <ErrorPage />,
-  },
+    children: [
-
       {
-    path: "/:id/menu",
+        path: "menu",
         element: <PageWrapper children={<MenuPage />} />,
         errorElement: <ErrorPage />,
       },
-
       {
-    path: "/:id/cart",
+        path: "cart",
         element: (
           <PageWrapper
             children={
@@ -86,37 +83,36 @@ export const router = createHashRouter([
       },
 
       {
-    path: "/:id/address",
+        path: "address",
         element: <PageWrapper children={<AddressPage />} />,
         errorElement: <ErrorPage />,
       },
 
       {
-    path: "/:id/checkout",
+        path: "checkout",
         element: <PageWrapper children={<CheckoutPage />} />,
         errorElement: <ErrorPage />,
       },
-
       {
-    path: "/:id/split-bill",
+        path: "split-bill",
         element: <PageWrapper children={<SplitBillPage />} />,
         errorElement: <ErrorPage />,
       },
 
       {
-    path: "/:id/product/:productId",
+        path: "product/:productId",
         element: <PageWrapper children={<ProductDetailPage />} />,
         errorElement: <ErrorPage />,
       },
 
       {
-    path: "/:id/search",
+        path: "search",
         element: <PageWrapper children={<SearchPage />} />,
         errorElement: <ErrorPage />,
       },
 
       {
-    path: "/:id/orders",
+        path: "orders",
         element: (
           <PageWrapper
             children={
@@ -128,24 +124,25 @@ export const router = createHashRouter([
         ),
         errorElement: <ErrorPage />,
       },
-
       {
-    path: "/:id/login",
+        path: "login",
         element: <PageWrapper children={<LoginPage />} />,
         errorElement: <ErrorPage />,
       },
 
       {
-    path: "/:id/otp",
+        path: "otp",
         element: <PageWrapper children={<OtpPage />} />,
         errorElement: <ErrorPage />,
       },
 
       {
-    path: "/:id/order/:orderId",
+        path: "order/:orderId",
         element: <PageWrapper children={<OrderPage />} />,
         errorElement: <ErrorPage />,
       },
+    ],
+  },
 
   {
     path: "errors",