Skip to content

Instantly share code, notes, and snippets.

@megamaddu
Last active September 26, 2016 22:15
Show Gist options
  • Save megamaddu/44e6f60c60b231e248dfb290d576d89e to your computer and use it in GitHub Desktop.
Save megamaddu/44e6f60c60b231e248dfb290d576d89e to your computer and use it in GitHub Desktop.
import React, { PropTypes } from 'react'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Link from 'react-router/Link'
import { compose, getContext } from 'recompose';
const store = createStore((s = {}, a) => s)
const BasicExample = () => (
<Router>
<Provider store={store}>
<div>
<Nav />
<hr/>
<Match exactly pattern="/" component={Home} />
<Match pattern="/about" component={About} />
<Match pattern="/topics" component={Topics} />
</div>
</Provider>
</Router>
)
const Nav = connect()(
compose(
getContext({ location: PropTypes.object, router: PropTypes.object }),
connect()
)(() => (
<ul>
<li><Link to="/" activeClassName="active">Home</Link></li>
<li><Link to="/about" activeClassName="active">About</Link></li>
<li><Link to="/topics" activeClassName="active">Topics</Link></li>
</ul>
))
)
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const Topics = ({ pathname }) => (
<div>
<h2>Topics</h2>
<ul>
<li><Link to={`${pathname}/rendering`}>Rendering with React</Link></li>
<li><Link to={`${pathname}/components`}>Components</Link></li>
<li><Link to={`${pathname}/props-v-state`}>Props v. State</Link></li>
</ul>
<Match pattern={`${pathname}/:topicId`} component={Topic}/>
<Match pattern={pathname} exactly render={() => (
<h3>Please select a topic</h3>
)}/>
</div>
)
const Topic = ({ params }) => (
<div>
<h3>{params.topicId}</h3>
</div>
)
export default BasicExample
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment