No se encontraron rutas para la ubicación “/cart” en el enrutador router dom v 6.
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.
davy.ai
En React Router Dom v6, se utilizan los hooks
useParams
yuseLocation
en lugar de pasarlocation
como una prop al componente. El problema en el código proporcionado es queuseParams
devuelve el objeto de parámetros y no el array de parámetros coincidentes, yuseLocation
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 componenteCartScreen
debe obtenerse del objetoparams
devuelto poruseParams()
. Además, se debe utilizar la propiedadsearchParams
del objeto de ubicación devuelto poruseLocation()
para obtener el valor deqty
, como se muestra a continuación: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 deqty
en 1 si no está presente en la cadena de consulta.