No sé cuál es el problema en mi página Product.js no funciona

• Producto.js

 import React, { Fragment, useEffect, useState } from "react"; import "./Products.css"; import { useSelector, useDispatch } from "react-redux"; import { clearErrors, getProduct } from "../../actions/productAction"; import Loader from "../layout/Loader/Loader"; import ProductCard from "../Home/ProductCard"; import { useParams } from "react-router-dom"; const Products = ({ match }) => { const dispatch = useDispatch(); const { products, loading, error // productsCount, // resultPerPage, // filteredProductsCount, } = useSelector((state) => state.products); const keyword = match.params.keyword; useEffect(() => { dispatch(getProduct(keyword)); }, [dispatch, keyword]); return ( <Fragment> {loading ? ( <Loader /> ) : ( <Fragment> <h2 className="productsHeading">Products</h2> <div className="products"> {products && products.map((product) => ( <ProductCard key={product._id} product={product} /> ))} </div> </Fragment> )} </Fragment> ); }; export default Products;

• Aplicación.js

 <Router> <Header /> <Routes> <Route path="/" element={<Home />} /> <Route path="/product/:id" element={<ProductDetails />} /> <Route path="/products" element={<Products />} /> <Route path="/search" element={<Search />} /> </Routes> <Footer /> </Router>;

• Productaction.js

 export const getProduct = (keyword = "") => async (dispatch) => { try { dispatch({ type: ALL_PRODUCT_REQUEST }); let link = `/api/v1/products?keyword=${keyword}`; const { data } = await axios.get(link); dispatch({ type: ALL_PRODUCT_SUCCESS, payload: data }); } catch (error) { dispatch({ type: ALL_PRODUCT_FAIL, payload: error.response.data.message }); } };

Me enfrento a este problema, pero si elimino los parámetros de coincidencia y palabra clave de product.js, comienza a funcionar, creo que hay un problema con esa coincidencia. para conectar backend y frontend he hecho "proxy": "http://localhost:4000" en package.json de frontend: 4000 siendo el puerto backend.