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="/" 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>
)}/>
)
}
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?
This feature has been deprecated because the new structure of Routes is that they should act like components, so you should take advantage of component lifecycle methods instead.
To recap, if you need to pass data from Link through to the new component that's being rendered, pass Link s a state prop with the data you want to pass through. Then, to access the Link s state property from the component that's being rendered, use the useLocation Hook to get access to location.
basename: stringThe base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
To use a button as a link in React, wrap the button in an <a> tag or a Link component if using react router. The button will get rendered instead of the link and clicking on it will cause the browser to navigate to the specified page.
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="/" 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>
)}/>
)
}
Still not sure what would cause the refresh bug to happen in the first place, but at least this does the trick.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With