Does each route's React class take over as the root element?

[trusktr]

So if I have

  var home = this.route('/', HomePage);
  var friends = this.route('/:user/friends', FriendsPage);

it seems like switch from / to /:user/friends will make the root element change from HomePage to FriendsPage, and so if you wanted to have like a common header with tabs for example, then you'd have to use that Header component in both HomePage and FriendsPage.

Is there a different pattern to use so that a Header element instance only need to be instantiated once, and a route (changed by switching tabs for example) would only change the content of the tab area?

[mystor]

You could have a template component which takes the page in as it's body (like <Templ><Page></Templ>)

[trusktr]

You mean for example that <Templ><Page></Templ> would be done inside render of HomePage or FriendsPage?

[trusktr]

I see what you mean, and I verified in https://github.com/facebook/react/issues/3577 that this is still performant, which was my underlying concern.