React Router 4 Architecture

[nhunzaker]

We need to talk about the ramifications of upgrading to React Router 4 on our recommended architecture.

Background

In the past we've used the route manifest in React Router 3 as a way to "wireframe out" the structure of our apps. Each route gets a presenter, that presenter gets a view, etc

export default (
  <Route component={Dashboard} path="/">
    <IndexRedirect to="strategies" />

    <Route path="strategies" component={Strategies}>
      <IndexRoute component={StrategiesAggregate} />
      <Route path="compare" component={StrategiesHistorical} />
    </Route>

    <Route path="factors" section="factors" component={Factors}>
      <IndexRoute component={FactorsAggregate} />
      <Route path="compare" component={FactorsHistorical} />
    </Route>
  </Route>
)

This has mostly worked well, but there's a couple of issues I've noticed:

• It's awkward to split app bundles by route, because there's a central route config (Recipe: Splitting Application State #313)
• It requires you to build a static route hierarchy up front, which can make changes hard later

Why we're talking about this

React Router 4 keeps routing within components. Instead of a route manifest, you use routing components within your normal application component tree. For example, a sidebar presenter in Microcosm might look like:

class UsersSidebar extends Presenter {
  render () {
    <aside>
      <Route path="/:user" component={UserShowPanel}/>
      <Route path="/:user/edit" component={UserEditPanel}/>
      <footer>
        <Link to="/">Go back</Link>
      </footer>
    </aside>
  }

So there's not a hard distinction between controlling presenters and passive views. This is okay. In our apps, we've started to see benefits from using presenters only where they are needed, rather than having a structure that crams presenters in as default "containers" and views for the sake of consistency...

What to do about it

• Should we drop the "presenters" directory, and just have "views"?
• Could we write a custom router that hooks directly into Microcosm?
  See https://reacttraining.com/react-router/web/api/Router
• Update the architecture docs, and make better recommendations for structuring apps
• Split routes by default on the quick start, and in our internal React boilerplate