Skip to content

Instantly share code, notes, and snippets.

@pH200

pH200/index.html

Created April 27, 2016 02:17
Show Gist options
  • Save pH200/5e006b550f159a3af89d6d3f0d5cd8fd to your computer and use it in GitHub Desktop.
Save pH200/5e006b550f159a3af89d6d3f0d5cd8fd to your computer and use it in GitHub Desktop.
Download ZIP
Illustration of some issue with cycle-react + react-router
Raw
index.html
<html>
<head>
<title>RxJs+Cycle-React</title>
</head>
<body>
<div id='root'>
</div>
</body>
<script src="/index.js"></script>
</html>
Raw
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link, browserHistory } from 'react-router';
import { component } from 'cycle-react';
import Rx from 'rx';
const App = component('App', (interactions, props) => {
return props.get('children').map(children => (
<div>
<h1>RxJS/Cycle component</h1>
<p>This is an RxJS/Cycle component.</p>
<p>
Hot module reloading is enabled, so the page will update immediately on save.
</p>
<Link to="/child_route/grandchild_route">To Child Route</Link>
{ children }
</div>
))
});
const SubHeader = component('SubHeader', () => Rx.Observable.just(
<div>SubHeader</div>
));
const routeConfig = [
{
path: '/',
component: App,
childRoutes: [
{
path: 'child_route',
childRoutes: [
{
path: 'grandchild_route',
component: SubHeader
}
]
}
]
}
];
ReactDOM.render((
<Router history={ browserHistory } routes={ routeConfig } />
), document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment