React Pose + React Router 键无法识别？

Question

所以我有一个小的 React 应用程序。尝试使用 React Pose 来制作页面转换动画。我遵循了与 one of the official demos with 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 子项，删除所有动画）保存并重新启动应用程序，然后重新添加完全相同的代码，工作正常.我不完全明白这里发生了什么，除非存在某种浏览器缓存问题或其他类似问题？

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

仍然不确定什么会导致刷新错误首先发生，但至少这可以解决问题。

React Pose + React Router 键无法识别？

React Pose + React Router Keys Not Recognized?

javascript

animation

reactjs

react-router-v4