React Pose + React路由器密钥无法识别？

Question

所以我有一个小的React应用程序.尝试使用React Pose为页面过渡设置动画.我跟着一个类似的结构作为使用react-router-dom的官方演示之一,如果我正在看这个,它应该正常工作.但是,我收到的错误是:

错误:嘿,听!每个过渡期的孩子都必须获得一个独特的钥匙

....并直接指向下面的代码.是否有某种方法可以在这里创建密钥？每个页面的元素是否可能导致问题？跟踪只直接指向这部分代码(特别是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元素(即将其分解为仅切换和路由子项,删除所有动画)保存并重新启动应用程序,然后重新添加完全相同的代码就可以了.我不完全理解这里发生了什么,除非出现某种浏览器缓存问题或其他类似问题？

Answer 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>
        )}/>
    )
}

仍然不确定什么会导致刷新错误首先发生,但至少这是诀窍.