I am using react-router in my application and I am looking for a way to stop the remount of components that are already in the DOM. For example, if I am at the URL dashboard
, then I will have an associated DashboardComponent
mounted. When I transition to dashboard/settings
then my DashboardComponent
as well as SettingsComponent
get remounted into the DOM. I would like to find a clean way to mount only the children of the current URL. Is this posible?
Router:
import { Component, createFactory, PropTypes } from 'react'
import { Route, RouteHandler, DefaultRoute, NotFoundRoute } from 'react-router'
import Home from '../components/Home'
import Dashboard from '../components/Dashboard'
import ViewPlayers from '../components/clubs/ViewPlayers'
let route = createFactory(Route),
handler = createFactory(RouteHandler),
root = createFactory(DefaultRoute),
pageNotFound = createFactory(NotFoundRoute),
Transitions = createFactory(require('react/lib/ReactCSSTransitionGroup'));
class App extends Component {
constructor() {
super();
}
render() {
return (
Transitions({transitionName: 'fade'},
handler({key: this.context.router.getCurrentPath()})
)
)
}
}
App.contextTypes = {
router: PropTypes.func
};
let Router = (
route({path: '/', name: 'home', handler: App},
root({handler: Home}),
route({path: 'dashboard', name: 'dashboard', handler: Dashboard},
route({path: 'players', name: 'players', handler: ViewPlayers}),
)
)
);
export { Router };
Dashboard (Parent component):
import React from 'react'
import { RouteHandler, Link } from 'react-router'
import { _, div } from './Html'
export default
class Dashboard extends React.Component {
constructor() {
super();
this.state = {}
}
componentWillMount() {
console.log('mounted')
}
componentWillUnmount() {
}
render() {
return (
div({},
_(Link)({to: 'players'}),
_(RouteHandler)({})
)
)
}
}
Note: _
is just a wrapper for React.createFactory()
React always unmounts and remounts components when its key
changes—that's the purpose of that property, to help React maintain an "identity" of a component. In particular, it's required when using React's CSS transitions, because the only way to animate out one component and animate in another is to have them be separate DOM nodes.
Because you pass {key: this.context.router.getCurrentPath()}
to the handler
component inside App
, React will unmount and remount the handler
component, even if it's the same type, any time getCurrentPath()
returns a different value. The solution would be to find a key that changes when you do want to animate, but stays the same otherwise.
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