Cuando construyes un carrito de compras en React, mostrar la orden correcta al hacer clic en My Orders requiere conectar tres piezas: el índice del array, la URL y el método correcto para leerla. Aquí aprendes cómo resolver esa lógica paso a paso usando lastIndexOf, substring y rutas dinámicas.

Por qué no se visualiza la lista de órdenes

El primer bug aparece porque dentro del map falta el return. Sin esa instrucción, el componente nunca se renderiza aunque el array de órdenes exista.

La solución es cambiar las llaves {} por paréntesis () en el arrow function, lo que convierte el cuerpo en un return implícito. Con ese ajuste, las tarjetas del carrito vuelven a aparecer en pantalla, aunque todavía sin estilos definitivos.

¿Qué hace el return implícito en un map de React? Permite devolver el JSX directamente sin escribir la palabra return, usando paréntesis en lugar de llaves alrededor del componente.

Cómo usar el index del array como identificador de la orden

Al revisar el console.log del objeto order, queda claro que nunca se guardó un id para cada orden. En lugar de modificar la estructura de datos, puedes aprovechar el index que ya entrega el map.

La lógica es simple: si la orden ocupa la posición 0 en el array, su ruta será /my-order/0. Si ocupa la posición 1, será /my-order/1. Así, el index funciona como identificador temporal sin tener que reescribir la lógica del checkout.

Cómo leer la URL con window.location.pathname

Para saber qué orden mostrar, necesitas leer la URL actual. JavaScript ofrece window.location.pathname, que devuelve la ruta sin el dominio.

javascript const currentPath = window.location.pathname

Con esa cadena en mano, el siguiente paso es extraer solo el número final, que corresponde al index.

Cómo extraer el último segmento de una URL en JavaScript

Aquí entra el mini algoritmo. Como no sabes si el valor final será 0, 1 o 25, lo más confiable es usar como referencia el último slash de la cadena.

• lastIndexOf('/') devuelve la posición del último slash dentro del string.
• Sumar + 1 mueve el cursor al carácter siguiente al slash.
• substring() corta la cadena desde esa posición hasta el final.

javascript let index = currentPath.substring(currentPath.lastIndexOf('/') + 1)

Con esa línea, si la URL es /my-order/2, la variable index guarda "2". Ya tienes el dato que necesitas para buscar la orden correcta dentro del context.

¿Para qué sirve lastIndexOf en JavaScript? Devuelve la posición de la última ocurrencia de un carácter dentro de un string. Es útil cuando no conoces la longitud exacta del valor que viene después.

Cómo configurar la ruta dinámica en React Router

Si al hacer clic en una orden aparece not found, el problema está en las rutas. La aplicación solo conoce /my-order/last, pero no /my-order/0 ni /my-order/1.

La solución es declarar una ruta dinámica usando :id como parámetro:

javascript <Route path='/my-order/:id' element={<MyOrder />} />

Los dos puntos le indican a React Router que ese segmento es variable. Así, cualquier número que aparezca después de /my-order/ será aceptado y renderizará el mismo componente.

Cómo manejar el caso especial de la ruta last

Después del checkout, la app redirige a /my-order/last en lugar de un número. Si intentas usar "last" como índice de un array, obviamente no funciona porque no es numérico.

La solución es interceptar ese caso dentro del componente MyOrder y reasignar el valor:

javascript let index = currentPath.substring(currentPath.lastIndexOf('/') + 1) if (index === 'last') { index = context.order?.length - 1 }

El operador ?. evita que la app se rompa si el array aún no existe. Restar - 1 al length es clave, porque los arrays empiezan en 0: si tienes 4 órdenes, el último index válido es 3.

¿Por qué se resta 1 al length de un array? Porque los arrays en JavaScript son zero-based. Un array con 4 elementos tiene índices del 0 al 3, así que length - 1 siempre apunta al último elemento.

Por qué cambiar const por let en este caso

Un detalle fácil de pasar por alto: si declaras index con const, no podrás reasignarlo cuando detectes el caso "last". Cambiarlo a let permite la reasignación y deja la lógica funcional.

Después de ese ajuste, el flujo completo funciona: agregas productos, haces checkout, ves la última orden recién creada y, al volver atrás, puedes hacer clic en cualquier orden anterior para ver sus productos correspondientes.

¿Qué otra solución se te ocurre para identificar las órdenes sin usar el index? ¿Le agregarías un id único con Date.now() o crypto.randomUUID()? Cuéntame en los comentarios cómo estilizaste tu tarjeta de orden y qué decisiones tomaste para mejorar la lógica.