Compatibility with animated route transitions #1
Description
Is react-title-component compatible with animated react-router transitions? Specifically, I am using velocity-react. From my experimenting, wrapping the router components with a VelocityTransitionGroup successfully transitions between routes, but it causes document titles to stack.
Navigating from... Page A => Page B => Page C ...I should end with a document title of "Page C | Base". With animated transitions, I end up with "Page C | Page B | Page A | Base".
If I remove animated transitions (i.e. – remove VelocityTransitionGroup), the document titles update as I expect (i.e. – they do not stack). Any thoughts on what may be going on here? Thanks!
// Routes
<Route path='/' component={App}>
<IndexRedirect to='/page-a' />
<Route path='/page-a' component={PageA} />
<Route path='/page-b' component={PageB} />
<Route path='/page-c' component={PageC} />
</Route>// App render
render () {
return (
<div>
<Title render='Base' />
<VelocityTransitionGroup enter={{ animation: 'fadeIn' }} leave={{ animation: 'fadeOut' }}>
{React.cloneElement(this.props.children, {
key: this.props.location.pathname
})}
</VelocityTransitionGroup>
</div>
)
}// Page A title
<Title render={(prev) => `Page A | ${prev}`} />// Page B title
<Title render={(prev) => `Page B | ${prev}`} />// Page C title
<Title render={(prev) => `Page C | ${prev}`} />