Skip to content

Instantly share code, notes, and snippets.

@dabit3
Last active January 11, 2017 22:26
Show Gist options
  • Save dabit3/ae4eeea9906c26e5643145664d540d0d to your computer and use it in GitHub Desktop.
Save dabit3/ae4eeea9906c26e5643145664d540d0d to your computer and use it in GitHub Desktop.
import React, { Component } from 'react'
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory, DefaultRoute, IndexLink } from 'react-router'
class App extends Component {
render () {
return (
<Router history={hashHistory}>
<Route path='/' component={Container}>
<IndexRoute component={Home} />
<Route path='/address' component={Address}>
<IndexRoute component={TwitterFeed} />
<Route path='instagram' component={Instagram} />
</Route>
<Route path='/about' component={About} />
<Route path='*' component={NotFound} />
</Route>
</Router>
)
}
}
const Nav = () => (
<div>
<IndexLink activeClassName='active' to='/'>Home</IndexLink>&nbsp;
<IndexLink activeClassName='active' to='/address'>Address</IndexLink>&nbsp;
<IndexLink activeClassName='active' to='/about'>About</IndexLink>
</div>
)
const Container = (props) => <div>
<Nav />
{props.children}
</div>
const Home = () => <h1>Hello from Home!</h1>
const Address = (props) => <div>
<br />
<Link to='/address'>Twitter Feed</Link>&nbsp;
<Link to='/address/instagram'>Instagram Feed</Link>
<h1>We are located at 555 Jackson St.</h1>
{props.children}
</div>
const Instagram = () => <h3>Instagram Feed</h3>
const TwitterFeed = () => <h3>Twitter Feed</h3>
const About = () => <h3>Welcome to the About Page</h3>
const NotFound = () => <h1>404.. This page is not found!</h1>
export default App
Copy link

ghost commented Jan 11, 2017

why is sometimes the path written with a / and sometimes not? like path='/address' and then path='instagram' ??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment