// import React from 'react'
// import {
//   createRouter,
//   createView,
//   Link
// } from 'rrx'

const Home = createView((props) => (
  <div>
    <h1>Home</h1>
  </div>
))

const About = createView((props) => (
  <div>
    <h1>About</h1>
  </div>
))

const Post = createView(({
  params
}) => (
  <div>
    <h1>{params.title}</h1>
  </div>
))

class App extends React.Component {
  render () {
    return (
      <div>
        <nav>
          <ul>
            <li><Link href='/'>Home</Link></li>
            <li><Link href='/about'>About</Link></li>
            <li><Link href='/posts/hello'>Hello Post</Link></li>
          </ul>
        </nav>
        <Home pattern='/' />
        <About pattern='/about' />
        <Post
          pattern='/posts/:title'
          foo='bar'
        />
      </div>
    )
  }
}

const Router = createRouter(App)

const props = {
  options: {
    basename: '/rrx'
  }
}

render(<Router {...props} />)

const App = () => (
  <div>
    <h1>Hello</h1>
  </div>
)

export default createRouter(App)

const About = () => (
  <h1>About</h1>
)

export default createView(About)

import About from './About'

const App = () => (
  <div>
    <About pattern='/about' />
  </div>
)

export default createRouter(App)

<Link href='/about'>
  About
</Link>