React Router Integration

For most applications that utilize React Router, having access to Microcosm is essential for dispatching actions as route handlers enter the stage.

We recommend mounting a “root” Presenter, framing context such that child presenters have access to a central Microcosm repo:

import React from 'react'
import DOM from 'react-dom'
import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'
import { AppContainer } from 'react-hot-loader'
import Application from './views/layout'

const repo = new Microocsm()

    <Application repo={repo} />

Drawing from the example above, Application may look something like:

import React from 'react'
import Switch from 'react-router/Switch'
import Route from 'react-router/Route'
import Presenter from 'microcosm/addons/presenter'

class Application extends Presenter {
  render() {
    return (
        { /* routes */ }

export default Application

For more information, see the React Router example app.