React-router: Nested root routes unmounting and remounting?

[mr-e-]

I have the following routes:

      path: '/',
      component: CoreLayout,
      indexRoute: {onEnter: (nextState, replaceState) => replaceState('/auth/splash')},
      childRoutes: [
        {
          path: '/auth',
          component: AuthLayout,
          childRoutes: [
            SplashView(store),
            LoginView(store),
            SignupView(store)
          ]
        }

Upon loading my application I would expect the the app to load like this (which it does):

<CoreLayout>
  <AuthLayout>
    <Splash />
.......

Now when I attempt to navigate to /auth/login I am noticing that while CoreLayout does not get unmounted, AuthLayout DOES get unmounted an remounted. Since LoginView is just a child view of AuthLayout, I would have expected both CoreLayout and AuthLayout to only receive componentWillUpdate. Why is AuthLayout being re-mounted?

https://github.com/ReactTraining/react-router/blob/master/docs/guides/ComponentLifecycle.md <- This document shows it happening one level deep, but doesn't explain what is supposed to happen when you go two levels deep.

[timdorr]

This isn't expected behavior, so something else is going on here. Since this is a usage question, please ask on Stack Overflow or Reactiflux.

[mr-e-]

What do you mean it isn't expected behavior? Wouldn't that make it a bug? Or does react-router simply not handle this use case?

[mr-e-]

@timdorr I've determined what the issue is, this could possible be re-opened. The issue isn't exactly with react-router as much as it is with all the examples that are given in terms of using ReactCSSTransitionGroup with react-router. Example: https://github.com/ReactTraining/react-router/blob/master/examples/animations/app.js

It appears then when the second level child is updated, cloneChildren is called on the parent again but AFTER the url has changed. This causes the key to change and for the parent element to therefore be re-mounted.

Does anybody have any suggestions about how to handle this?