TypeError: Cannot read properties of undefined (reading 'path')

[nilabhjaiswal]

import React,{ Fragment, useEffect } from 'react';
import {useDispatch, useSelector } from "react-redux";
import { useAlert } from "react-alert";
import { Link, useMatch } from "react-router-dom";
import { Typography } from "@mui/material";
import "./OrderDetails.css";
import Loader from "../layout/Loader/Loader";
import MetaData from "../layout/MetaData";
import { getOrderDetails, clearErrors } from "../../actions/orderAction";

const OrderDetails = () => {
const { order, error, loading } = useSelector((state) => state.orderDetails);

const match = useMatch();
const dispatch = useDispatch();
const alert = useAlert();

useEffect(() => {
if (error) {
alert.error(error);
dispatch(clearErrors());
}

dispatch(getOrderDetails(match.params.id));

}, [dispatch, alert, error, match.params.id]);
return (

{loading ? (

) : (

Order #{order && order._id}

Shipping Info

Name:

{order.user && order.user.name}

Phone:

{order.shippingInfo && order.shippingInfo.phoneNo}

Address:

{order.shippingInfo &&
${order.shippingInfo.address}, ${order.shippingInfo.city}, ${order.shippingInfo.state}, ${order.shippingInfo.pinCode}, ${order.shippingInfo.country}}

Payment

<p
className={
order.paymentInfo &&
order.paymentInfo.status === "succeeded"
? "greenColor"
: "redColor"
}
>
{order.paymentInfo &&
order.paymentInfo.status === "succeeded"
? "PAID"
: "NOT PAID"}

            <div>
              <p>Amount:</p>
              <span>{order && order.totalPrice}</span>
            </div>
          </div>

          <Typography>Order Status</Typography>
          <div className="orderDetailsContainerBox">
            <div>
              <p
                className={
                  order.orderStatus && order.orderStatus === "Delivered"
                    ? "greenColor"
                    : "redColor"
                }
              >
                {order && order.orderStatus}
              </p>
            </div>
          </div>
        </div>

        <div className="orderDetailsCartItems">
          <Typography>Order Items:</Typography>
          <div className="orderDetailsCartItemsContainer">
            {order.orderItems &&
              order.orderItems.map((item) => (
                <div key={item.product}>
                  <img src={item.image} alt="Product" />
                  <Link to={`/product/${item.product}`}>
                    {item.name}
                  </Link>{" "}
                  <span>
                    {item.quantity} X ₹{item.price} ={" "}
                    <b>₹{item.price * item.quantity}</b>
                  </span>
                </div>
              ))}
          </div>
        </div>
      </div>
    </Fragment>
  )}
</Fragment>

)
}

export default OrderDetails