Ключи маршрутизатора React Pose + React не распознаются?

Итак, у меня есть небольшое приложение на 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, удаление всей анимации), сохранение и перезапуск приложения с последующим повторным добавлением того же кода обратно работает нормально. Я не совсем понимаю, что здесь происходит, если нет какой-либо проблемы с кешированием браузера или чего-то еще в этом направлении?

Вы все еще получаете эту ошибку после добавления этого ключа?

Bhojendra Rauniyar 01.10.2018 04:26

После добавления какого ключа? Приведенный выше код - это мой текущий код.

Isaac Doud 01.10.2018 04:33

добавить ключ в PoseGroup

Amir-Mousavi 01.10.2018 06:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
6
3
1 586
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После появления ошибки обновления на своей странице 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 иногда не определен, но я не уверен, почему это могло произойти.

zpr 04.10.2018 19:31

Ты спас мне день! Большое спасибо, @Isaac Doud!

NoNickAvailable 25.07.2019 03:29

Другие вопросы по теме