Question

所以我有一个小型的React应用。尝试使用React Pose为页面过渡设置动画。我遵循的结构与one of the official demos with 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元素（即，将其分解为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密钥？

1 个答案: