Apply Filter while redirecting links using React.JS and Umi.JS

Recently, working on a project (Which is built using ReactJS and routing is based on Umi.JS). And, I got a scenario where, I created a statistics page (in which I am showing the count of every different type of data of a particular category), and then I have to create a button of each category, which should push to that particualr category page (using history.push()).

Now, initially, when I click over "View Complaints" button then it used to just take me to Complaints page.

Now, what I want to do is when I click on the "View Complaints" then instead of just pushing the history to that specific page, it should even pass the specific branchId as a query, which will behave as a filter over the pushed page (complaints page).

What I did?

At first, I focused on the button to be clicked, which means "View Complaints" Page.

At first, my button code was looking like this...

 <Button
  type="primary"
  onClick={(event) => {
  event.stopPropagation();
  history.push(`/complaints/all`);
  }}>
  View Complaints
 </Button>

As, I already mentioned that I have to send branchId as a query to apply filter, so I have to send the query with the path, inside history.push() and now, it looks like this.

<Button
type="primary"
onClick={(event) => {
event.stopPropagation();
history.push({
pathname: `/complaints/all`,
query: {
branchId: profileId,
  },
 });
}}>
View Complaints
</Button>

and now with this thing, it will pass query, when you click on the button.

But, this will still not apply the filter, and for that, I have to pass query to the filter function, which is eventually getting the filtered data from the API.

import { useLocation } from 'umi';

const { pathname, query: branchQuery } = useLocation();

and then, I am calling the query inside the function, where we are dispatching the API, with the query as a payload.

const getFinishedComplaints = () => {
    let query = {
      statusId: 'CRQ_CLOSED',
      customerId: currentUser?.personal_details?.organizationDetails?.orgPartyId,
      keyword: searchText,
      startIndex: completeStartIndex,
      viewSize: completeViewSize,
    };

    if (branchQuery?.branchId) {
      query = { ...query, branchId: branchQuery?.branchId };
    }

    dispatch({
      type: 'product/getFinishedComplaints',
      payload: {
        query,
      },
    });
  };

And, in this way, you can easily apply filter functionality, by passing query using history.push() of Umi.js.

Alternative way

You can even use react-router-dom for above given functionality.