title: Is it possible to only remount only the new child components on react-router transition
body: <p>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 <code>dashboard</code>, then I will have an associated <code>DashboardComponent</code> mounted. When I transition to <code>dashboard/settings</code> then my <code>DashboardComponent</code> as well as <code>SettingsComponent</code> 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?</p>
  
  <p>Router:</p>
  
  <pre><code>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 };
  </code></pre>
  
  <p>Dashboard (Parent component):</p>
  
  <pre><code>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)({})
              )
          )
      }
  }
  </code></pre>
  
  <p><strong>Note:</strong> <code>_</code> is just a wrapper for React.createFactory()</p>