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.
Top comments (0)