El código que funciona actualmente ha cambiado bastante con respecto al mostrado en el vídeo. Tanto el package.json como el app.js
El package.json:
{
"name": "ejemplo-router",
"dependencies": {
"babel-cli": "^6.4.5",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^2.0.0-rc5"
},
"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13"
},
"scripts": {
"build": "browserify -t [ babelify --presets [ es2015 react ] ] app.js > build.js"
},
"babel": {
"presets": [
"es2015"
]
}
}
El app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { default as Router, Route, hashHistory, Link } from 'react-router';
const RouteHandler = Router.RouteHandler;
class App extends React.Component {
render() {
return <div>
<h1> App </h1>
<Link to="/user">User</Link>
<Link to="/about">About</Link>
{this.props.children}
</div>
}
}
class About extends React.Component {
render() {
return <p> About page </p>
}
}
class User extends React.Component {
render() { console.log('User');
return <p> User page </p>
}
}
const routes = <Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="user" component={User} />
<Route path="about" component={About} />
</Route>
</Router>
ReactDOM.render(routes, document.getElementById('container'));
