Недавно я работал над проектом (который построен с использованием ReactJS, а маршрутизация основана на Umi.JS). И у меня возник сценарий, в котором я создал страницу статистики (на которой я показываю количество каждого типа данных определенной категории), а затем мне нужно создать кнопку для каждой категории, которая должна переходить на страницу этой категории (используя history.push()).
Изначально, когда я нажимаю на кнопку «Просмотр жалоб», она просто переводит меня на страницу жалоб.
Теперь я хочу сделать так: когда я нажимаю на кнопку «View Complaints», то вместо того, чтобы просто переместить историю на эту конкретную страницу, она должна даже передать конкретный branchId
как query
, который будет вести себя как фильтр на переведенной странице (странице жалоб).
Что я сделал?
Сначала я сосредоточился на кнопке, которую нужно нажать, то есть на странице «Просмотр жалоб».
Сначала код моей кнопки выглядел следующим образом…
<Button
type="primary"
onClick={(event) => {
event.stopPropagation();
history.push(`/complaints/all`);
}}>
View Complaints
</Button>
Поскольку я уже упоминал, что для применения фильтра мне нужно отправить branchId в качестве запроса, мне пришлось отправить запрос с путем внутри history.push()
и теперь это выглядит следующим образом.
<Button
type="primary"
onClick={(event) => {
event.stopPropagation();
history.push({
pathname: `/complaints/all`,
query: {
branchId: profileId,
},
});
}}>
View Complaints
</Button>
и теперь с этой штукой, она будет передавать запрос, когда вы нажмете на кнопку.
Но это все еще не применит фильтр, и для этого мне нужно передать запрос в функцию filter, которая в конечном итоге получает отфильтрованные данные из API.
import { useLocation } from 'umi';
const { pathname, query: branchQuery } = useLocation();
и затем я вызываю запрос внутри функции, в которой мы отправляем API с запросом в качестве полезной нагрузки.
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,
},
});
};
Таким образом, вы можете легко применить функциональность фильтра, передав запрос с помощью history.push() из Umi.js.
Альтернативный способ
Вы даже можете использовать react-router-dom
для вышеуказанной функциональности.