update

src/App.tsx

@@ -6,6 +6,7 @@ import { NotFound } from './components/NotFound/NotFound';
 import { ContactData } from './containers/ContactData/ContactData';
 import { Layout } from './components/Layout/Layout';
 import { Orders } from './containers/Orders/Orders';
+import { Context } from './containers/Context';
 
 function App() {
   return (
@@ -13,7 +14,8 @@ function App() {
       <Routes>
         <Route path='/' element={<Layout/>}>
           <Route index element={<BurgerBuilder/>}/>
-          <Route path='/orders' element={<Orders/>}/>
+          <Route path='/orders' element={<Context/>}/>
+          <Route path='/order' element={<Context/>}/>
           <Route path='/checkout' element={<Checkout/>}>
             <Route path='contactData' element={<ContactData/>}/>
           </Route>

src/components/Order/OrderItem/OrderItem.css

@@ -5,6 +5,7 @@
     padding: 10px;
     margin: 10px auto;
     box-sizing: border-box;
+    cursor: pointer;
 }
 .OrderItem span {
     text-transform: capitalize;

src/components/Order/OrderItem/OrderItem.tsx

@@ -4,10 +4,11 @@ import "./OrderItem.css";
 
 type TProps = {
     ingredients: Ingredients,
-    price: number
+    price: number,
+    onClick: VoidFunction
 };
 
-export const OrderItem = ({ingredients, price}: TProps) => {
+export const OrderItem = ({ingredients, price, onClick}: TProps) => {
     const ings = Object.keys(ingredients).map(igName => {
         return {
           name: igName,
@@ -20,7 +21,7 @@ export const OrderItem = ({ingredients, price}: TProps) => {
     ));
     
     return (
-        <div className="OrderItem">
+        <div className="OrderItem" onClick={onClick}>
             <p>Ingredients: {ingredientOutput}</p>
             <p>Price: <strong>{price} KZT</strong></p>
         </div>

src/containers/Context.tsx

+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const Context = () => {
+    const location = useLocation();
+
+    useEffect(() => {
+        console.log(location, 'location');
+    }, []);
+    
+    return (
+        location.pathname === "/order" ?
+        <div>
+            Order Page
+        </div>
+        :
+        <div>
+            Orders Page
+        </div>
+    );
+};
\ No newline at end of file

src/containers/Orders/Orders.tsx

 import React, {useState, useEffect, useCallback} from "react";
+import { useNavigate } from "react-router-dom";
 import axiosBurger from "@/config/axiosBurger";
 import { parseGetOrders } from "@/helpers/parseGetOrders";
 import { TOrder } from "@/interfaces/order";
@@ -6,6 +7,8 @@ import { OrderItem } from "@/components/Order/OrderItem/OrderItem";
 import { Spinner } from "@/components/UI/Spinner/Spinner";
 
 export const Orders = () => {
+    const navigate = useNavigate();
+
     const [orders, setOrders] = useState<TOrder[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
@@ -20,12 +23,20 @@ export const Orders = () => {
         getOrders();
     }, []);
 
+    const onClickHandler = (id: string) => {
+        navigate({
+            pathname: `/order`
+        })
+    };
+    
     return (
+
         <>
             <Spinner show={isLoading}/>
             {
                 orders.map(order => (
                     <OrderItem
+                        onClick={() => onClickHandler(order.id)}
                         key={order.id}
                         ingredients={order.ingredients}
                         price={order.price}