es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se encontraron rutas para la ubicación “/cart” en el enrutador router dom v 6.

27 Jul, 2023 Programación

Cuando ejecuto console.log(qty) (en el código de abajo), veo No routes matched location "/cart" (desde la consola del navegador) en lugar del valor de qty. En react-router-dom v5 todo funciona bien pasando location como props al componente, pero eso no funciona en v6. El siguiente bloque de código funciona en router-dom v5:

export function CartScreen({ match, location, history }) {
    const qty = location.search ? Number(location.search.split("=")[1]) : 1

    console.log('qty:', qty)

    return (
        <div>
            <h1>Add to CART</h1>
        </div>
    )
}

Manejador de agregar al carrito:

const addToCartHandler = () => {
    history(`/cart/${match.id}?qty=${qty}`)
}

<button type='button' onclick="{addToCartHandler}">Añadir al carrito</button>

Sin embargo, el código anterior no es válido en router-dom v6, así que intenté lograr el mismo resultado cambiándolo al siguiente (pero no está funcionando):

const CartScreen = () => {
    const match = useParams()
    const location = useLocation()
    const productID = match.id
    const qty = location.search ? Number(location.search.split("=")[1]) : 1

    console.log('qty:', qty)

    return (
        <div>
            <h1>Add to CART</h1>
        </div>
    )
}

App.js
function App() {
    return (
        <router>
            <routes>
                <route path='/cart/:id?' element=""></route><cartscreen></cartscreen>} />
            </routes>
        </router>
    )
}

export default App

El problema principal es la forma en que utilicé location en router-dom v6.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En React Router Dom v6, se utilizan los hooks useParams y useLocation en lugar de pasar location como una prop al componente. El problema en el código proporcionado es que useParams devuelve el objeto de parámetros y no el array de parámetros coincidentes, y useLocation devuelve un objeto con los detalles de la URL actual en lugar del objeto de ubicación.

    Para solucionar el problema, el productID en el componente CartScreen debe obtenerse del objeto params devuelto por useParams(). Además, se debe utilizar la propiedad searchParams del objeto de ubicación devuelto por useLocation() para obtener el valor de qty, como se muestra a continuación:

    import { useParams, useLocation } from 'react-router-dom';

const CartScreen = () => {
    const { id } = useParams();
    const location = useLocation();
    const qty = new URLSearchParams(location.search).get('qty') || 1;

    console.log('qty:', qty);

    return (
        <div>
            <h1>Agregar al CARRITO</h1>
        </div>
    );
}

    El código anterior debería registrar correctamente el valor de qty. Ten en cuenta que la verificación || 1 se agrega para establecer el valor predeterminado de qty en 1 si no está presente en la cadena de consulta.

Comments are closed.