Добрый день! Есть главный файл App, в котором прописаны пути:
(Если что, то сайт про персонажей из звездных воин, просто загружаются изображения и при клике переносит на страницу инфы с этим персонажем)
const App = () => {
return (
<div className="container">
<Header/>
<Routes>
<Route path='/' element={<HomePage/>}></Route>
<Route path='/people' element={<PeoplePage/>}></Route>
<Route path='/people/:id' element={<PersonPage/>}></Route>
<Route path='*' element={<PageNotFound/>} ></Route>
</Routes>
</div>
)
}
Компонент PeoplePage выдает изображения людей, при клике на изображение вас бросает на компонент PersonPage, где уже исходя из индекса персонажа делается запрос и дальше уже ложу данные в стейт.
Как вы видите, путь "/people/:id" ведет на страницу PersonPage, где делается запрос fetch для получения данных, id не статическое, путь может быть: "/people/1, /people/3, /people/4", данные либо есть, либо выдает компонент: , но вот так не задача, сайт вроде бы работает, но когда я возвращаюсь на PeoplePage и снова кликаю на изображение БЕЗ ПЕРЕЗАГРУЗКИ, то сайт просто грузиться, причем в итоге сайт хочет закрыться, вообще понять не могу.
Компонент PeoplePage:
const PeoplePage = () => {
const [people, setPeople] = React.useState([])
const [counterPage, setCounterPage] = React.useState(1)
const [prevPage, setPrevPage] = React.useState(null)
const [nextPage, setNextPage] = React.useState(null)
const query = useQueryParams()
const queryPage = query.get('page')
const getSourse = async (url) => {
const res = await getApiJson(url)
if (res) {
const peopleList = res.results.map(({name, url}) => {
const id = getId(url)
const img = getFullSourse(id)
return ({name, url, img})
})
setPeople(peopleList)
setPrevPage(res.previous)
setNextPage(res.next)
setCounterPage(getPeoplePageId(url))
setErrorApi(false);
} else {
setErrorApi(true)
}
}
useEffect(() => {
getSourse(API_PEOPLE+queryPage)
}, [getSourse])
Компонент PersonPage:
const PersonPage = () => {
const navigate = useNavigate()
const getPersonUrl = getFullPerson(getPersonId(useLocation().pathname))
const fullImgSourse = getFullSourse(getPersonId(useLocation().pathname))
const [personInfo, setPersonInfo] = React.useState([])
const [films, setFilms] = React.useState([])
const [infoLoaded, setInfoLoaded] = React.useState(false)
const handleClick = (e) => {
e.preventDefault()
navigate(-1)
}
React.useEffect(() => {
if (!infoLoaded) {
const getSourse = async (url) => {
const getPerson = await getApiJson(url)
setPersonInfo([{ title: 'Height', data: getPerson.height }, { title: 'Name', data: getPerson.name }])
const getFilms = await getApiJson(url)
setFilms(getFilms.films)
}
getSourse(getPersonUrl)
}
}, [infoLoaded])
