I don't know whats the problem in my Product.js page its not working
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;
<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>;
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
});
}
};
I am facing this issue but if I remove match and keyword parameters from product.js it starts working there is a problem with that match I think. for connecting backend and frontend I have done "proxy": "http://localhost:4000" in package.json of frontend :4000 being the backend port.
