Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/** @jsx React.DOM */
var Dashboard = React.createClass({
render: function() {
return (
<div>
<h1>Dashboard!</h1>
<ul>
<li><Link to="inbox">Inbox</Link></li>
</ul>
{this.props.activeRoute}
</div>
);
}
});
/** @jsx React.DOM */
var Inbox = React.createClass({
render: function() {
return (
<div>
<h1>Inbox!</h1>
</div>
);
}
});
/** @jsx React.DOM */
var Routes = rf.router.Routes;
var Route = rf.router.Route;
var Link = rf.router.Link;
var Main = React.createClass({
render: function() {
return (
<Routes handler={App}>
<Route name="dashboard" path="dashboard" handler={PreDashboard}>
<Route name="inbox" path="dashboard/inbox" handler={PreInbox}/>
</Route>
</Routes>
);
}
});
var AsyncJSXRoute = {
load: function() {
if (window[this.globalName]) return;
JSXTransformer.load(this.filePath, this.forceUpdate.bind(this));
},
componentDidMount: function() {
setTimeout(this.load, 1000); // feel it good
},
render: function() {
var fullRoute = window[this.globalName];
return fullRoute ? fullRoute(this.props) : this.preRender();
}
};
var PreDashboard = React.createClass({
mixins: [AsyncJSXRoute],
filePath: 'examples/partial-app-dashboard.js',
globalName: 'Dashboard',
preRender: function() {
return <div>Loading dashboard...</div>
}
});
var PreInbox = React.createClass({
mixins: [AsyncJSXRoute],
filePath: 'examples/partial-app-inbox.js',
globalName: 'Inbox',
preRender: function() {
return <div>Loading inbox...</div>
}
});
var App = React.createClass({
render: function() {
return (
<div>
<h1>Partial App</h1>
<ul>
<li><Link to="dashboard">Dashboard</Link></li>
</ul>
{this.props.activeRoute}
</div>
);
}
});
React.renderComponent(<Main/>, document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.