using react-router@3 and fix dev config

app/app.js

@@ -1,17 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter, Route } from 'react-router-dom'
+import { Router, Route, IndexRoute, hashHistory } from 'react-router'
 
+import App from './pages/app/app.jsx'
 import Home from './pages/home/home.jsx'
 import About from './pages/about/about.jsx'
-// import Inbox from './pages/inbox/inbox.jsx'
-// console.log(1,hashHistory)
+import Inbox from './pages/inbox/inbox.jsx'
 
 ReactDOM.render((
-  <BrowserRouter>
-    <div>
-      <Route path="/" component={Home}/>
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Home} />
       <Route path="/about" component={About}/>
-    </div>
-  </BrowserRouter>
+      <Route path="/inbox" component={Inbox}/>
+    </Route>
+  </Router>
 ), document.getElementById('app'));

app/pages/about/about.jsx

@@ -4,7 +4,7 @@ class About extends Component{
   render() {
     return (
       <div>
-        <h2>About</h2>
+        <h2>this is about page</h2>
       </div>
     )
   }

app/pages/app/app.jsx

@@ -0,0 +1,17 @@
+import React, {Component} from 'react'
+import { Link } from 'react-router'
+
+class App extends Component{
+  render() {
+    return (
+      <div>
+        <Link to="/">home</Link><br/>
+        <Link to="/about">abouts</Link><br/>
+        <Link to="/inbox">inbox</Link>
+        {this.props.children}
+      </div>
+    )
+  }
+};
+
+export default App;

app/pages/home/home.jsx

@@ -4,12 +4,7 @@ class Home extends Component{
   render() {
     return (
       <div>
-        <h1>App</h1>
-        <ul>
-          <li>asdfafd</li>
-          <li>h42wressdddd</li>
-        </ul>
-        {this.props.children}
+        <h1>this is home page</h1>
       </div>
     )
   }

app/pages/inbox/inbox.jsx

@@ -4,7 +4,7 @@ class Inbox extends React.Component{
   render() {
     return (
       <div>
-        <h2>Inbox sdddss</h2>
+        <h2>this is inbox page</h2>
       </div>
     )
   }

package.json

@@ -4,8 +4,8 @@
   "description": "using react with webpack",
   "main": "index.js",
   "scripts": {
-    "test": "npm run test",
-    "dev": "webpack-dev-server --open --hot --config webpack.config.dev.js"
+    "start": "webpack-dev-server --open --progress --colors --content-base ./build",
+    "build": "webpack --progress --colors"
   },
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
   "dependencies": {
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-router-dom": "^4.1.2"
+    "react-router": "^3.0.5"
   },
   "devDependencies": {
     "babel": "^6.23.0",

webpack.config.js

@@ -0,0 +1,57 @@
+const path = require('path'),
+      webpack = require('webpack'),
+      HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: {
+      app: path.resolve(__dirname, 'app/app.js'),
+      verdor: ['react', 'react-dom', 'react-router']
+    },
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: 'js/[name].js'
+    },
+    devtool: 'cheap-module-source-map',
+    module: {
+      rules: [
+        {
+          test: /\.(bmp|gif|jpe?g|png)$/,
+          use: {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: 'images/[name].[ext]'
+            }
+          }
+        },
+        {
+          test: /\.(js|jsx)$/,
+          include: path.resolve(__dirname, 'app'),
+          use: {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              presets: ['react', 'es2015']
+            }
+          }
+        },
+        {
+          test: /\.sass$/,
+          use: [
+            { loader: 'style-loader' },
+            { loader: 'css-loader' },
+            { loader: 'sass-loader' }
+          ]
+        }
+      ]
+    },
+    // devServer: {
+    //   contentBase: path.join(__dirname, "build"),
+    //   hot: true,
+    //   port: 9000
+    // },
+    plugins: [
+      new HtmlWebpackPlugin({template: 'app/index.html'}),
+      new webpack.HotModuleReplacementPlugin()
+    ]
+};