React-Router mit Webpack-Dev-Server Setup

Question

Neu im Webpack, habe Probleme beim korrekten Setup mit React-Router und Webpack-Dev-Server.

Der Grund, warum ich diesen Weg einrichten möchte, ist die Verwendung von webpack-hot-middleware, um die Seite jedes Mal neu zu laden, wenn ich etwas im Code ändere.

Obwohl ich in der Lage bin, für die IndexPage richtig zu rendern, wenn ich manuell an einem anderen Eingangspunkt in der URL eintippe, wird Webpack denken, dass ich woanders abruft, wo es sich in Wirklichkeit im React-Router befindet.

Hier aktuelle Setup (oder Github repository):

webpack.config

var path = require('path') 
var webpack = require('webpack'); 
module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './src/client/index.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     test: /\.js$/, 
     loaders: ['react-hot', 'babel'], 
     include: path.join(__dirname, 'src') 
    },{ 
     test: /\.s?css$/, 
     loaders: ['style','css','sass'], 
     include: path.join(__dirname, 'src') 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

server.js für webpack

var path = require('path'); 
var webpack = require('webpack'); 
var express = require('express'); 
var config = require('./webpack.config'); 

var app = express(); 
var compiler = webpack(config); 
// 
app.use(require('webpack-dev-middleware')(compiler, { 
    publicPath: config.output.publicPath 
})); 

app.use(require('webpack-hot-middleware')(compiler)); 

app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

app.listen(3000, function(err) { 
    if (err) { 
    return console.error(err); 
    } 

    console.log('Listening at http://localhost:3000/'); 
}) 

src/client/index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 
import thunk from 'redux-thunk'; 

import App from './components/app'; 
import VotesContainer from './containers/votes-container'; 
import Welcome from './components/welcome' 
import reducers from './reducers'; 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk))) 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 
     <IndexRoute component={Welcome} /> 
     <Route path="allposts" component={VotesContainer} /> 
     </Route> 
    </Router> 
    </Provider> 
    , document.querySelector('#project')); 

package.json

{ 
    "name": "simple-app", 
    "version": "1.0.0", 
    "description": "demo", 
    "main": "index.js", 
    "repository": "", 
    "scripts": { 
    "start": "node server.js", 
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --require ignore-styles --recursive ./test", 
    "test:watch": "npm run test -- --watch", 
    "dev": "nodemon src/server/index.js" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.2.1", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    "chai": "^3.5.0", 
    "chai-jquery": "^2.0.0", 
    "express": "^4.13.4", 
    "ignore-styles": "^5.0.1", 
    "jquery": "^2.2.1", 
    "jsdom": "^8.1.0", 
    "mocha": "^2.4.5", 
    "node-sass": "^3.8.0", 
    "react-addons-test-utils": "^0.14.7", 
    "react-hot-loader": "^1.3.1", 
    "webpack": "^1.12.9", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-dev-server": "^1.16.2", 
    "webpack-hot-middleware": "^2.10.0" 
    }, 
    "dependencies": { 
    "babel-preset-stage-1": "^6.1.18", 
    "bcrypt-nodejs": "0.0.3", 
    "body-parser": "^1.15.2", 
    "css-loader": "^0.26.1", 
    "express": "^4.14.0", 
    "jwt-simple": "^0.5.1", 
    "lodash": "^3.10.1", 
    "mongoose": "^4.7.1", 
    "morgan": "^1.7.0", 
    "node-sass": "^3.13.0", 
    "passport": "^0.3.2", 
    "passport-jwt": "^2.2.1", 
    "passport-local": "^1.0.0", 
    "proxy-middleware": "^0.15.0", 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "react-redux": "^4.0.0", 
    "react-router": "^2.8.1", 
    "react-thunk": "^1.0.0", 
    "redux": "^3.0.4", 
    "redux-thunk": "^2.1.0", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1" 
    } 
} 

Answer 1

Also habe ich es aus. Ich hatte die ganze Zeit recht, ich habe einfach vergessen, meinen Server zurückzusetzen.

Ursprünglich hatte ich so eingestellt:

app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

Nach meinem Server neu zu starten und haben / ersetzen mit * hat den Trick