Возможно, проблема заключается в необходимости оптимизации вашего кода. Например, при каждом изменении в любом компоненте вам нужно проверять, что компоненты, которые зависят от этой измененной переменной, должны перерендериваться или нет. Для того, чтобы сделать это эффективно, вам может понадобиться переместить свою функцию `getSourse` на уровень выше, чтобы она не вызывалась при каждом изменении состояний.
Кроме того, вам необходимо учесть состояние компонента `PeoplePage` между переходами. Если вы вернетесь на страницу `PeoplePage`, то предыдущие данные будут сохранены, и при переходе на другой `PersonPage` без перезагрузки страницы они будут использоваться заново. Чтобы решить эту проблему, вы можете очистить данные в компоненте `PeoplePage` при каждом переходе на другой `PersonPage`.
Например, это можно сделать, обнулив значения `prevPage`, `nextPage`, `people` и `counterPage` в компоненте `PeoplePage` с помощью вычисляемых свойств, и они будут автоматически обновляться при каждом переходе на другую страницу. Вот пример такого кода:
const PeoplePage = () => {
const query = useQueryParams()
const queryPage = query.get('page')
const [prevPage, setPrevPage] = React.useState(null)
const [nextPage, setNextPage] = React.useState(null)
const [people, setPeople] = React.useState([])
const [counterPage, setCounterPage] = React.useState(parseInt(queryPage || "1"))
const [error, setError] = React.useState(false)
React.useEffect(() => {
setPeople([])
setError(false)
const getSourse = async (url) => {
const res = await getApiJson(url);
if (res?.results) {
const peopleList = res.results.map(({ name, url }) => {
const id = getId(url)
const img = getFullSourse(id)
return ({ name, url, img })
})
setPrevPage(res.previous)
setNextPage(res.next)
setPeople(peopleList)
setCounterPage(getPeoplePageId(url))
} else {
setError(true)
}
}
getSourse(API_PEOPLE + queryPage)
}, [queryPage])
...
Это позволит вам сохранить текущие данные, необходимые для отображения на странице `PeoplePage`, и перейти на другую страницу `PersonPage` без проблем. Также будьте уверены, что вы используете ключи для каждого элемента, возвращаемого в компонентах, чтобы React мог инвалидировать этот элемент при его удалении.
