Navigating in react.js

In my react.js (Fluxxor) application I have to navigate between different forms. For example: Login component is shown as long as the user is not authenticated. Once the user logs in the login component disappears an a list of entries component (or something else) should be displayed. From there I could open the entry detail component (which means that the list of entries component should be hidden).

What is the best approach for this?

What I've tried:

Replacing components (Unmounting component which should be hidden and mount component which should be displayed)
Having multiple components in DOM. (But it looks like this is not allowed/possible)
Having a root component which all child components (login, list, detail) and letting their store classes decide whether the component is visible or not)

THanks

Solution

I am partial to the third approach, which is having one component manage the "state" of the application by rendering different components. Controller views are then in charge of registering child components and interacting with stores/services as necessary. I typically use react router and have top level routes for each of my controller views.

The following pseudocode expresses the structure:

<Router>
  <ControllerView>
   <SubComponent>
   <AnotherSubComponent>
  </ControllerView>

  <AnotherControllerView>
   <SubComponent>
   <AnotherSubComponent>
  </AnotherControllerView>
</Router>