javascript - 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

.... 并直接指向下面的代码。是否有某种方法可以在这里创建 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>
        )}/>
    )
}

如有任何想法或建议，我们将不胜感激。我不确定它是否需要返回的各个页面的 key ，或者我是否缺少其他内容。

编辑

所以，奇怪的是，删除所有 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>
        )}/>
    )
}

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