One way to simplify routing in React

Layout.jsx

const Layout = Child => props =>
  <div>
    <header></header>
    <main>
      <Child />
    </main>
  </div>

export default Layout

Main.jsx

import { render } from 'react-dom'
import { Route, Router } from 'react-router'

import Home     from './Home'
import Profile  from './Profile'
import Profiles from './Profiles'

render(
  <Router>
    <Route path='/' component={Home} />
    <Route path='/profiles' component={Profiles} />
    <Route path='/profiles/:id' component={Profile} />
  </Router>
)

Profile.jsx

import Layout from './Layout'

const Profile = props =>
  <div class="profile"></div>

export default Layout(Profile)

Profiles.jsx

import Card   from './Card'
import Layout from './Layout'

const Profiles = props =>
  <div class="profiles">
    { props.profiles.map(Card) }
  </div>

export default Layout(Profiles)