title: Pagination is not working in React Frontend
body: <p>Pagination is not working in React Frontend. I am creating an Ecommerce Application and want to Paginate my products on my website. Here is the Code for Getting Product with Pagination.</p>
  <pre><code>const getProducts = asyncHandler(async (req, res, next) =&gt; {
    const pageSize = 3;
    const page = Number(req.query.pageNumber) || 1;
    const keyword = req.query.keyword
      ? {
          name: {
            $regex: req.query.keyword,
            $options: 'i',
          },
        }
      : {};
    const count = await Product.countDocuments({ ...keyword });
    const products = await Product.find({ ...keyword })
      .limit(pageSize)
      .skip(pageSize * (page - 1))
      .sort({ _id: -1 });
    res.json({ products, page, pages: Math.ceil(count / pageSize) });
  });
  </code></pre>
  <p>I am using Redux for state Management. Here is the code for the Reducer</p>
  <pre><code>// PRODUCT LIST
  export const productListReducer = (state = { products: [] }, action) =&gt; {
    switch (action.type) {
      case PRODUCT_LIST_REQUEST:
        return { loading: true, products: [] };
      case PRODUCT_LIST_SUCCESS:
        return {
          loading: false,
          pages: action.payload.pages,
          page: action.payload.page,
          products: action.payload.products,
        };
      case PRODUCT_LIST_FAIL:
        return { loading: false, error: action.payload };
      default:
        return state;
    }
  };
  </code></pre>
  <p>And here is the Action code</p>
  <pre><code>// PRODUCT LIST
  export const listProduct =
    (keyword = ' ', pageNumber = ' ') =&gt;
    async (dispatch) =&gt; {
      try {
        dispatch({ type: PRODUCT_LIST_REQUEST });
        const { data } = await axios.get(
          `/api/products?keyword=${keyword}&amp;pageNumber=${pageNumber}`
        );
        dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
      } catch (error) {
        dispatch({
          type: PRODUCT_LIST_FAIL,
          payload:
            error.response &amp;&amp; error.response.data.error
              ? error.response.data.error
              : error.message,
        });
      }
    };
  </code></pre>
  <p>And this is the Component for pagination and few others</p>
  <pre><code>import React, { useEffect } from 'react';
  import { Link } from 'react-router-dom';
  import Rating from './Rating';
  import Pagination from './pagination';
  import { useDispatch, useSelector } from 'react-redux';
  import { listProduct } from '../../Redux/Actions/ProductActions';
  import Loading from '../LoadingError/Loading';
  import Message from '../LoadingError/Error';
  
  const ShopSection = (props) =&gt; {
    const { keyword, pagenumber } = props;
    const dispatch = useDispatch();
  
    const productList = useSelector((state) =&gt; state.productList);
    const { loading, error, products, page, pages } = productList;
  
    useEffect(() =&gt; {
      dispatch(listProduct(keyword, pagenumber));
    }, [dispatch, keyword, pagenumber]);
    return (
      &lt;&gt;
        &lt;div className='container'&gt;
          &lt;div className='section'&gt;
            &lt;div className='row'&gt;
              &lt;div className='col-lg-12 col-md-12 article'&gt;
                &lt;div className='shopcontainer row'&gt;
                  {loading ? (
                    &lt;div className='mb-5'&gt;
                      &lt;Loading /&gt;
                    &lt;/div&gt;
                  ) : error ? (
                    &lt;Message variant='alert-danger'&gt;{error}&lt;/Message&gt;
                  ) : (
                    &lt;&gt;
                      {products.map((product) =&gt; (
                        &lt;div
                          className='shop col-lg-4 col-md-6 col-sm-6'
                          key={product._id}
                        &gt;
                          &lt;div className='border-product'&gt;
                            &lt;Link to={`/products/${product._id}`}&gt;
                              &lt;div className='shopBack'&gt;
                                &lt;img src={product.image} alt={product.name} /&gt;
                              &lt;/div&gt;
                            &lt;/Link&gt;
  
                            &lt;div className='shoptext'&gt;
                              &lt;p&gt;
                                &lt;Link to={`/products/${product._id}`}&gt;
                                  {product.name}
                                &lt;/Link&gt;
                              &lt;/p&gt;
  
                              &lt;Rating
                                value={product.rating}
                                text={`${product.numReviews} reviews`}
                              /&gt;
                              &lt;h3&gt;${product.price}&lt;/h3&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      ))}
                    &lt;/&gt;
                  )}
  
                  {/* Pagination */}
                  &lt;Pagination
                    pages={pages}
                    page={page}
                    keyword={keyword ? keyword : ''}
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default ShopSection;
  
  </code></pre>
  <p>And Pagination Component is here</p>
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  
  const Pagination = (props) =&gt; {
    const { page, pages, keyword = '' } = props;
    return (
      pages &gt; 1 &amp;&amp; (
        &lt;nav&gt;
          &lt;ul className='pagination justify-content-center'&gt;
            {[...Array(pages).keys()].map((x) =&gt; (
              &lt;li
                className={`page-item ${x + 1 === page ? 'active' : ''}`}
                key={x + 1}
              &gt;
                &lt;Link
                  className='page-link'
                  to={
                    keyword
                      ? `/search/${keyword}/page/${x + 1}`
                      : `/page/${x + 1}`
                  }
                &gt;
                  {x + 1}
                &lt;/Link&gt;
              &lt;/li&gt;
            ))}
          &lt;/ul&gt;
        &lt;/nav&gt;
      )
    );
  };
  
  export default Pagination;
  
  </code></pre>
  <p>And here is my App.js component</p>
  <pre><code>import React from 'react';
  import './App.css';
  import './responsive.css';
  import 'react-toastify/dist/ReactToastify.css';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  import HomeScreen from './screens/HomeScreen';
  import SingleProduct from './screens/SingleProduct';
  import Login from './screens/Login';
  import Register from './screens/Register';
  import CartScreen from './screens/CartScreen';
  import ShippingScreen from './screens/ShippingScreen';
  import ProfileScreen from './screens/ProfileScreen';
  import PaymentScreen from './screens/PaymentScreen';
  import PlaceOrderScreen from './screens/PlaceOrderScreen';
  import OrderScreen from './screens/OrderScreen';
  import NotFound from './screens/NotFound';
  import PrivateRouter from './PrivateRoute';
  
  const App = () =&gt; {
    return (
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route path='/' component={HomeScreen} exact /&gt;
          &lt;Route path='/search/:keyword' component={HomeScreen} exact /&gt;
          &lt;Route path='/page/:pagenumber' component={HomeScreen} exact /&gt;
          &lt;Route
            path='/search/:keyword/page/:pageNumber'
            component={HomeScreen}
            exact
          /&gt;
          &lt;Route path='/products/:id' component={SingleProduct} /&gt;
          &lt;Route path='/login' component={Login} /&gt;
          &lt;Route path='/register' component={Register} /&gt;
          &lt;PrivateRouter path='/profile' component={ProfileScreen} /&gt;
          &lt;Route path='/cart/:id?' component={CartScreen} /&gt;
          &lt;PrivateRouter path='/shipping' component={ShippingScreen} /&gt;
          &lt;PrivateRouter path='/payment' component={PaymentScreen} /&gt;
          &lt;PrivateRouter path='/placeorder' component={PlaceOrderScreen} /&gt;
          &lt;PrivateRouter path='/order/:id' component={OrderScreen} /&gt;
          &lt;Route path='*' component={NotFound} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  };
  
  export default App;
  
  </code></pre>
  <p>When i try to send request from postman the data is returning fine. I have already debug alot and couldn't able to resolve this bug. Help me to resolve this i will be grateful to you</p>