Skip to content

Instantly share code, notes, and snippets.

@pzula
Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pzula/14d5fc98b2d322a029f1 to your computer and use it in GitHub Desktop.
Save pzula/14d5fc98b2d322a029f1 to your computer and use it in GitHub Desktop.
React router
var React = require('react')
var Router = require('react-router')
var { Route, RouteHandler, Link,
DefaultRoute, NotFoundRoute, Redirect } = Router
var App = React.createClass({
render() {
return (
<div>
<h1>
<Link to='home'>Welcome!</Link>
</h1>
<ul>
<li><Link to='users'>Users</Link></li>
<li><Link to='about'>About</Link></li>
</ul>
<RouteHandler />
</div>
)
}
})
var Home = React.createClass({
render() {
return (
<div>Home!</div>
)
}
})
var Users = React.createClass({
render() {
return (
<div>Users!</div>
)
}
})
var About = React.createClass({
render() {
return (
<div>About!</div>
)
}
})
var NotFound = React.createClass({
render() {
return (
<div>Page Not Found!</div>
)
}
})
var routes = (
<Route path='/' handler={ App }>
<DefaultRoute name='home' handler={ Home } />
<Route name='users' handler={ Users } />
<Route name='about' handler={ About } />
<NotFoundRoute handler={ NotFound } />
</Route>
)
Router.run(routes, (Handler) => {
React.render(<Handler />, document.getElementById('app'))
})
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var NotFoundRoute = Router.NotFoundRoute;
var Redirect = Router.Redirect;
var App = React.createClass({
render: function() {
return (
<div>
<h1>Hello!</h1>
<ul>
<li><Link to="users">Users</Link></li>
<li><Link to="about">About</Link></li>
</ul>
<RouteHandler />
</div>
);
}
});
var About = React.createClass({
render: function() {
return (
<div>About</div>
);
}
});
var Users = React.createClass({
render: function() {
return (
<div>Users</div>
);
}
});
var Home = React.createClass({
render: function() {
return (
<div>Home</div>
);
}
});
var NotFound404 = React.createClass({
render: function() {
return (
<div>404</div>
);
}
});
var routes = (
<Route path="/" handler={App}>
<DefaultRoute handler={Home} />
<Route name="users" handler={Users}></Route>
<Route name="about" handler={About} />
<Redirect from="company" to="about" />
<NotFoundRoute handler={NotFound404} />
</Route>
)
window.addEventListener('hashchange', function(e) {console.log(location.hash)});
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment