反应路由器历史记录问题

Question

当我点击“http://localhost:8080/”时，我得到“无法获取/”

我已经实施了“browserHistory”，如下所示：

import React from 'react';
import { Route, Router, IndexRoute, browserHistory } from 'react-router';
import ReactDOM from 'react-dom';

import Wrapper       from './../components/wrapper.jsx';
import Home          from './../components/home.jsx';
import Projects      from './../components/projects.jsx';
import SingleProject from './../components/projectContent/singleProject.jsx';
import About         from './../components/aboutUs.jsx'

ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={Wrapper} >
            <IndexRoute component={Home} />
            <Route path="projects" component={Projects} />
            <Route path="projects/:id" component={SingleProject} />
            <Route path="about" component={About} />
        </Route>
    </Router>
), document.getElementById('app'));

的package.json

{
  "name": "react-router-prototype",
  "version": "1.0.0",
  "description": "react router prototype",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch",
    "build": "webpack -p",
    "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
  },
  "author": "Alessandro Santese",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "jquery": "^3.1.0",
    "json-loader": "^0.5.4",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-router": "^2.6.1",
    "webpack": "^1.13.1"
  },
  "devDependencies": {
    "node-sass": "^3.10.0",
    "sass-loader": "^4.0.2",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/config/routes.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_DIR,
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'sass' ]
      }, 
      {
        test: /\.json$/, 
        loader: "json-loader"
     }
    ]
  },
  devServer: {
      historyApiFallback: true
  }
};

module.exports = config;

wrapper.jsx

import React from 'react';

import Header from './header.jsx';
import Footer from './footer.jsx';

class MobileMenu extends React.Component {
  render () {
    return (
        <div className="mobile-menu">
          <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
          </ul>
        </div>
    )
  }
}

class Wrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }
  toggleWrapper() {
    this.setState({open: !this.state.open});
  }
  render () {
    const toggle = this.state.open ? ' open' : '';
    return (
        <section className={"wrapper" + toggle}>
        <div className="inner-wrapper">
          <MobileMenu />
            <div className="content">
            <Header action={this.toggleWrapper.bind(this)}/>
            {this.props.children}
            <Footer />
          </div>
        </div>
        </section>
    );
  }
}

export default Wrapper;

我想在服务器上测试我的应用程序的当前状态，但我需要先对此问题进行排序。