So I have a small React app. Trying to use React Pose to animate page transitions. I've followed a similar structure as one of the official demos with react-router-dom, and if I'm looking at this right, it should be working. However, I'm getting an error that says:

Error: HEY, LISTEN! Every child of Transition must be given a unique key

.... And points directly to the code below. Is there a certain method that keys should be created here? Are there elements of each page that might be causing an issue here? The trace only points directly to this section of code (specifically the PoseGroup) so I'm not sure what I'm missing here.

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="/" ponent={Home} key="home"/>
                        <Route path="/about" ponent={About} key="about"/>
                        <Route path="/bugs" ponent={Bugs} key="bugs"/>
                        <Route path="/security" ponent={Security} key="security"/>
                        <Route path="/aur" ponent={Aur} key="aur"/>
                        <Route path="/download" ponent={Download} key="download"/>
                    </Switch>
                </RouteContainer>
            </PoseGroup>
        )}/>
    )
}

Any thoughts or advice would be appreciated. I'm not sure if it's requiring keys for the individual pages that are returned or if it's something else that I'm missing.

EDIT

So, strangely enough, removing all PoseGroup elements (i.e. breaking it down to just the Switch and Route children, removing all animation) saving and restarting the application, then re-adding the exact same code back in works just fine. I don't fully understand what's going on here, unless there's some kind of browser caching issue or something else along those lines?

So I have a small React app. Trying to use React Pose to animate page transitions. I've followed a similar structure as one of the official demos with react-router-dom, and if I'm looking at this right, it should be working. However, I'm getting an error that says:

Error: HEY, LISTEN! Every child of Transition must be given a unique key

.... And points directly to the code below. Is there a certain method that keys should be created here? Are there elements of each page that might be causing an issue here? The trace only points directly to this section of code (specifically the PoseGroup) so I'm not sure what I'm missing here.

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="/" ponent={Home} key="home"/>
                        <Route path="/about" ponent={About} key="about"/>
                        <Route path="/bugs" ponent={Bugs} key="bugs"/>
                        <Route path="/security" ponent={Security} key="security"/>
                        <Route path="/aur" ponent={Aur} key="aur"/>
                        <Route path="/download" ponent={Download} key="download"/>
                    </Switch>
                </RouteContainer>
            </PoseGroup>
        )}/>
    )
}

Any thoughts or advice would be appreciated. I'm not sure if it's requiring keys for the individual pages that are returned or if it's something else that I'm missing.

EDIT

So, strangely enough, removing all PoseGroup elements (i.e. breaking it down to just the Switch and Route children, removing all animation) saving and restarting the application, then re-adding the exact same code back in works just fine. I don't fully understand what's going on here, unless there's some kind of browser caching issue or something else along those lines?

• javascript
• reactjs
• animation
• react-router-v4

• are you still getting that error after adding that key? – Bhojendra Rauniyar Commented Oct 1, 2018 at 2:26
• After adding which key? The code above is my current code. – Isaac Doud Commented Oct 1, 2018 at 2:33
• add the key to PoseGroup – Amir-Mousavi Commented Oct 1, 2018 at 4:57

1 Answer 1

After bringing up the refresh bug on their github page, one of them noted that instead of the RouteContainer having a location.key, it should be replaced with a location.pathname for better accuracy. After doing this, the refresh bug stopped happening and things worked as they should. This is what the end code looked like.

const Routes = (props) => {
    return(
        <Route render={({ location }) => (
            <PoseGroup>
                <RouteContainer key={location.pathname}>
                    <Switch location={location}>
                        <Route exact path="/" ponent={Home} key="home"/>
                        <Route path="/about" ponent={About} key="about"/>
                        <Route path="/bugs" ponent={Bugs} key="bugs"/>
                        <Route path="/security" ponent={Security} key="security"/>
                        <Route path="/aur" ponent={Aur} key="aur"/>
                        <Route path="/download" ponent={Download} key="download"/>
                    </Switch>
                </RouteContainer>
            </PoseGroup>
        )}/>
    )
}

Still not sure what would cause the refresh bug to happen in the first place, but at least this does the trick.