小编Isa*_*oud的帖子

所以我有一个小的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>
        )}/>
    )
} …