Hola gente como andan? Estoy iniciandome en React, estoy realizando un e-commerce en react y tengo un problema con el listado de productos, tengo los productos desde firebase y que los filtros con una funcion con un condicional, dandome los todos los items que tiene la misma categoria utilizando useParams. Pero el problema que tengo es que no estoy pudiendo hacer que, si en la url escribo cualquire cosa (que no sea una categoria) me redireccione al 404. Es decir que si pongo http://localhost:3000/cervezas me renderiza todos los items que tiene la categoria cervezas, pero si pongo http://localhost:3000/asdsaasdsad quiero que me redireccione al 404, y no estoy pudiendo realizarlo. Desde ya gracias. Les dejo el código:
const { category } = useParams();
const [products, setProducts] = useState([])
const [loading, setLoading] = useState(true)
const navigate = useNavigate()
const getProducts = async () => {
const itemCollection = collection(db, "bebidas")
const productsSnapshot = await getDocs(itemCollection)
const itemList = productsSnapshot.docs.map((item) => {
const product = item.data()
product.id = item.id
return product
})
return itemList
}
useEffect(() => {
setLoading(true)
setProducts([])
return getProducts().then((productos) => {
setLoading(false)
filterProductByCategory(productos, category)
})
}, [category])
const filterProductByCategory = (array, categoria) => {
array.map((producto) => {
if (categoria === producto.categoria) {
setProducts(products => [...products, producto])
}
})
}
return (
<>
<h1>{category.toUpperCase()}</h1>
<div className="boxItem">
{
!loading ? (
products.map((producto) => {
const { id, nombre, precio, tamaño, imagen, stock, categoria } = producto;
return (
<Link to={`./${id}`}>
<div key={id} className="item" >
<Item
nombre={nombre}
precio={precio}
tamaño={tamaño}
img={imagen}
stockItem={stock}
/>
</div>
</Link>
)
})
) : (
<Box sx={{ display: 'flex' }}>
<CircularProgress />
</Box>
)
}
</div>
</>
)
}