Итак, у меня есть небольшое приложение на React. Попытка использовать React Pose для анимации переходов между страницами. Я следовал структуре, аналогичной одна из официальных демонстраций с react-router-dom, и если я смотрю на нее правильно, она должна работать. Однако я получаю сообщение об ошибке:
Error: HEY, LISTEN! Every child of Transition must be given a unique key
.... И указывает прямо на приведенный ниже код. Есть ли здесь определенный метод создания ключей? Есть ли элементы на каждой странице, которые могут вызывать здесь проблему? Трассировка указывает только непосредственно на этот раздел кода (в частности, на PoseGroup), поэтому я не уверен, что мне здесь не хватает.
const RouteContainer = posed.div({
enter: { opacity: 1, delay: 350, beforeChildren: true, y: 0 },
exit: { opacity: 0, y: -50 }
});
const Routes = (props) => {
return(
<Route render = {({ location }) => (
<PoseGroup>
<RouteContainer key = {location.key}>
<Switch location = {location}>
<Route exact path = "/" component = {Home} key = "home"/>
<Route path = "/about" component = {About} key = "about"/>
<Route path = "/bugs" component = {Bugs} key = "bugs"/>
<Route path = "/security" component = {Security} key = "security"/>
<Route path = "/aur" component = {Aur} key = "aur"/>
<Route path = "/download" component = {Download} key = "download"/>
</Switch>
</RouteContainer>
</PoseGroup>
)}/>
)
}
Любые мысли или советы будут оценены. Я не уверен, требуются ли ключи для отдельных возвращаемых страниц или мне не хватает чего-то еще.
РЕДАКТИРОВАТЬ
Итак, как ни странно, удаление всех элементов PoseGroup (т. Е. Разбиение его только на дочерние элементы Switch и Route, удаление всей анимации), сохранение и перезапуск приложения с последующим повторным добавлением того же кода обратно работает нормально. Я не совсем понимаю, что здесь происходит, если нет какой-либо проблемы с кешированием браузера или чего-то еще в этом направлении?
После добавления какого ключа? Приведенный выше код - это мой текущий код.
добавить ключ в PoseGroup



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


После появления ошибки обновления на своей странице github один из них заметил, что вместо RouteContainer, имеющего location.key, его следует заменить на location.pathname для большей точности. После этого ошибка обновления перестала появляться, и все заработало, как должно. Вот как выглядел конечный код.
const Routes = (props) => {
return(
<Route render = {({ location }) => (
<PoseGroup>
<RouteContainer key = {location.pathname}>
<Switch location = {location}>
<Route exact path = "/" component = {Home} key = "home"/>
<Route path = "/about" component = {About} key = "about"/>
<Route path = "/bugs" component = {Bugs} key = "bugs"/>
<Route path = "/security" component = {Security} key = "security"/>
<Route path = "/aur" component = {Aur} key = "aur"/>
<Route path = "/download" component = {Download} key = "download"/>
</Switch>
</RouteContainer>
</PoseGroup>
)}/>
)
}
Все еще не уверен, что может вызвать ошибку обновления, но, по крайней мере, это помогает.
Причина в том, что location.key иногда не определен, но я не уверен, почему это могло произойти.
Ты спас мне день! Большое спасибо, @Isaac Doud!
Вы все еще получаете эту ошибку после добавления этого ключа?