<main></main>
html, body { margin:0; padding: 0}
.top-bar {
background: black;
color: white;
padding: 10px;
margin-bottom:10px;
}
nav a {
padding: 10px;
}
nav a.active {
color: yellow;
background:blue;
}
.content {
padding:10px;
}
var { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } = ReactRouter;
var App = React.createClass({
render: function() {
var names = ['jane', 'bob', 'martha'];
return <div className="">
<div className="top-bar">Yo Router</div>
<nav>
<IndexLink to="/" activeClassName="active">Main</IndexLink>
<Link to="about" activeClassName="active">About</Link>
<Link to="users" activeClassName="active">Users</Link>
</nav>
<div className="content">{this.props.children}</div>
</div>
}
})
var About = React.createClass({
render: function() {
return <div>
Yo Im the about page
</div>;
}
});
var Hello = React.createClass({
render: function() {
var name = this.props.params.name;
return <p>Hello! {name}</p>
}
});
var Users = React.createClass({
render: function() {
return <div>Yo Im the users page</div>;
}
});
var Index = React.createClass({
render: function() {
return <p>List of all items...</p>
}
});
var Routes = React.createClass({
render: function() {
const plainRoutes = [
{
path: '/',
component: App,
indexRoute: { component: Index },
childRoutes: [
{ path: "about", component: About },
{ path: "users", component: Users },
{ path: "hello/:name", component: Hello },
]
},
];
return <Router history={hashHistory} routes={plainRoutes} />
}
});
ReactDOM.render(<Routes />, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.