pull

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --display-error-details --inline --content-base dist",
+    "start": "webpack-dev-server --display-error-details --inline --content-base  dist/ --history-api-fallback",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",

src/components/App.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link,IndexLink } from 'react-router';
 import NavLink from './NavLink'
 
 export default React.createClass({
 	render(){
 		return (
 			<div>
 		        <h1>React Router Tutorial</h1>
-		        <ul role="nav">
-		          <li><NavLink to="/">Index</NavLink></li>
+		        <ul role="nav"> 
+		          <li><NavLink to="/"  onlyActiveOnIndex={true}>Home</NavLink></li>
 		          <li><NavLink to="/about" >About</NavLink></li>
 		          <li><NavLink to="/repos">Repos</NavLink></li>
 		        </ul>

src/config/routes.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Route, IndexRoute } from 'react-router'
+import App from '../components/App';
+import About from '../components/About'
+import Repos from '../components/Repos'
+import Repo from '../components/Repo'
+import NavLink from '../components/NavLink'
+
+import '../styles/index.less';
+
+module.exports = (
+	<Route path="/" component={App}>
+	      <Route path="/repos" component={Repos}>
+	      	<Route path="/repos/:userName/:repoName" component={Repo}/>
+	      </Route>
+	      <Route path="/about" component={About}/>
+	</Route>
+)

src/index.js

@@ -1,22 +1,12 @@
-import React from 'react';
-import {render} from 'react-dom';
-import App from './components/App';
-import About from './components/About'
-import Repos from './components/Repos'
-import Repo from './components/Repo'
-import NavLink from './components/NavLink'
+import React from 'react'
+import {render} from 'react-dom'
+import {Router,browserHistory} from 'react-router'
+import routes from './config/routes'
 
-import './styles/index.less';
+// import {Router,Route,hashHistory} from 'react-router'
+// import {Router,Route,browserHistory,IndexRoute} from 'react-router'
 
-import {Router,Route,hashHistory} from 'react-router'
-
-render((
-   <Router history={hashHistory}>
-    <Route path="/" component={App}>
-      <Route path="/repos" component={Repos}>
-      	<Route path="/repos/:userName/:repoName" component={Repo}/>
-      </Route>
-      <Route path="/about" component={About}/>
-    </Route>
-  </Router>
-),document.getElementById('app'))
+render(
+   <Router routes={routes} history={browserHistory} />,
+   document.getElementById('app')
+)

webpack.config.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack')
 //打开浏览器
 const WebpackBrowserPlugin = require('webpack-browser-plugin');
 //单独打包css
@@ -7,10 +8,11 @@ const htmlWebpackPlugin = require('html-webpack-plugin');
 const config = {
 	entry:'./src/index.js',
 	output:{
-		filename:'bundle.js',
+		filename:'bundle[hash:8].js',
 		publicPath:'dist/',
 		path:__dirname+'/dist'
 	},
+	'devtool': "source-map",
 	module:{
 		loaders:[
 			{
@@ -30,14 +32,15 @@ const config = {
 		]
 	},
 	plugins: [
-	    new ExtractTextPlugin("bundle.css"),
-	    new htmlWebpackPlugin({
-	    	template: './src/index.html',
-	    	filename: './index.html'
-	    }),
-       new WebpackBrowserPlugin()
+		    new ExtractTextPlugin("bundle[hash:8].css"),
+		    new htmlWebpackPlugin({
+		    	template: './src/index.html',
+		    	filename: './index.html'
+		    }),
+	       new WebpackBrowserPlugin()
+	       // new webpack.optimize.UglifyJsPlugin()
 
-  ]
+  			]
 };
 
-module.exports = config;
+module.exports = config;