app.js

import React from 'react'
import { render } from 'react-dom'
import { createHistory, useBasename } from 'history'
import { Router, Route, Link } from 'react-router'

const history = useBasename(createHistory)({
  basename: '/shared-root'
})

class App extends React.Component {
  render() {
    return (
      <div>
        <p>
          This illustrates how routes can share UI w/o sharing the URL.
          When routes have no path, they never match themselves but their
          children can, allowing "/signin" and "/forgot-password" to both
          be render in the <code>SignedOut</code> component.
        </p>
        <ol>
          <li><Link to="/home" activeClassName="active">Home</Link></li>
          <li><Link to="/signin" activeClassName="active">Sign in</Link></li>
          <li><Link to="/forgot-password" activeClassName="active">Forgot Password</Link></li>
        </ol>
        {this.props.children}
      </div>
    )
  }
}

class SignedIn extends React.Component {
  render() {
    return (
      <div>
        <h2>Signed In</h2>
        {this.props.children}
      </div>
    )
  }
}

class Home extends React.Component {
  render() {
    return (
      <h3>Welcome home!</h3>
    )
  }
}

class SignedOut extends React.Component {
  render() {
    return (
      <div>
        <h2>Signed Out</h2>
        {this.props.children}
      </div>
    )
  }
}

class SignIn extends React.Component {
  render() {
    return (
      <h3>Please sign in.</h3>
    )
  }
}

class ForgotPassword extends React.Component {
  render() {
    return (
      <h3>Forgot your password?</h3>
    )
  }
}

render((
  <Router history={history}>
    <Route path="/" component={App}>
      <Route component={SignedOut}>
        <Route path="signin" component={SignIn} />
        <Route path="forgot-password" component={ForgotPassword} />
      </Route>
      <Route component={SignedIn}>
        <Route path="home" component={Home} />
      </Route>
    </Route>
  </Router>
), document.getElementById('example'))