Multiple activeRouteHandlers

[OscarGodson]

I have a mobile UI where you have a header, the "app content" thats a fixed height the size of the window with overflow auto, and then on some pages a big submit button. Sort of like this UI

The HTML is sort of like:

<div class="wrapper">
  <div class="header"></div>
  <div class="app-content"></div>
  <div class="big-button"></div> <!-- on some pages, and sometimes 2 buttons -->
</div>

To achieve this design I just made .wrapper display:flex in a column. That works great. The only problem is that the app-content is where I'm putting <this.props.activeRouteHandler/> which means there's no clean way to to get the big-button to show up or hide based on the route. Is there anyway I can setup multiple <this.props.activeRouteHandler/> so it'd look sort of like:

<div class="wrapper">
  <div class="header"></div>
  <div class="app-content"><this.props.activeRouteHandler /></div>
  <div class="big-button"><this.props.activeRouteHandler2 /></div> <!-- on some pages, and sometimes 2 buttons -->
</div>

Or, do you have other suggestions on how to handle this?

[tcoopman]

The best way to do this at the moment is to pass a extra handler as a prop in your routes I believe.
Something like this:

<Routes location="history">
      <Route path="/" handler={MainSection}>
        <Route name="new" path="new" handler={handler} extraHandler={activeHandler2} />
      </Route>
</Routes>

You have to extra the second handler yourself but this works fine:

var routeHandler = this.props.activeRouteHandler();
var activeRouteHanlder2 = routeHandler.props.extraHandler;

[haohcraft]

@tcoopman Just curious. How three handlers? Besides "extraHandler", what attributes can I use? Could you please guide me to the related code base. Thanks

[ryanflorence]

Look at the sidebar example to see how the parent handler can introspect the active route handler and then branch its view logic on it:

https://github.com/rackt/react-router/blob/master/examples/sidebar/app.js#L81-L84

You can mixin ActiveState and ask for all sorts of things like the active params, or even the full active route tree and walk that to decide what you want to render and where. I would not add handlers to your route config, I would branch in your handler and display different components there.

ActiveState docs