Skip to content

Instantly share code, notes, and snippets.

@nojaf
Last active April 25, 2016 14:36
Show Gist options
  • Save nojaf/9fa008352ead6a7da5be0cee9e176bc1 to your computer and use it in GitHub Desktop.
Save nojaf/9fa008352ead6a7da5be0cee9e176bc1 to your computer and use it in GitHub Desktop.
minimal react router
let {Router, Route, Link, browserHistory, IndexRoute } = ReactRouter;
class HomePage extends React.Component<any,any> {
render(){
return <h1>Home</h1>
}
}
class AboutPage extends React.Component<any,any> {
render(){
return <h1>About</h1>
}
}
class Container extends React.Component<any,any> {
render(){
return <div>
<ul className="menu">
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<div>
{this.props.children}
</div>
</div>
}
}
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={Container}>
<IndexRoute component={HomePage} />
<Route path="about" component={AboutPage} />
</Route>
</Router>
),
document.getElementById('container')
);
<!DOCTYPE html>
<html>
<head>
<title>minimal react</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script type="text/javascript" src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/12056978_1532581897044561_572594621_n.js"></script>
<script type="text/javascript" src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12056978_1723186904561917_1347349243_n.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.3.0/ReactRouter.min.js"></script>
<script type="text/javascript" src="dist/app.js"></script>
</body>
</html>
{
"compilerOptions": {
"watch": true,
"jsx": "react",
"outDir": "dist"
}
}
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"react/react-global.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-create-fragment.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-css-transition-group.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-dom.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-transition-group.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-linked-state-mixin.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-pure-render-mixin.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-perf.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-test-utils.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react/react-addons-update.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react-router/react-router.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
},
"react-router/history.d.ts": {
"commit": "ed7feb8223518d5af92381813b1fd79a934aa683"
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment