はと反応するホット・ローダーとのWebPACK-devのサーバー作業が反応し、ルータ

を作ることができない私はwebpack-dev-serverとreact-routerでreact-hot-loaderを使用しようとしているが、私はローカルホストにアクセスしようとすると：3000/Iが得る：はと反応するホット・ローダーとのWebPACK-devのサーバー作業が反応し、ルータ

Cannot GET /

もちろん、localhost：8000 /にアクセスしようとすると動作します。私はreact-hot-boilerplateに従うことを試みたが、成功しなかった。

ここに私のコードだ：

server.js

const http = require('http'); 
const express = require('express'); 
const consolidate = require('consolidate'); 
const bodyParser = require('body-parser'); 
const routes = require('./routes'); 

const app = express(); 

app.set('views', 'public/pages'); // Set the folder-name from where you serve the html page. 
app.set('view engine', 'html'); 
app.engine('html', consolidate.handlebars); 
app.use(express.static('public')); // Set the folder from where you serve all static files 
app.use(express.static('public/dist')); // Set the folder from where you serve all static files 
app.use(bodyParser.urlencoded({ extended: true })); 

const portNumber = 8000; 

http.createServer(app).listen(portNumber,() => { 
    console.log(`Server listening at port ${portNumber}`); 
    routes.initialize(app); 
}); 

const webpack = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 
const config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    colors: true, 
    historyApiFallback: true, 
    inline: true, 
    hot: true, 
}).listen(3000, 'localhost', (err) => { 
    if (err) { 
    console.log(err); 
    } 
});

routes.js（ので、すべてのルートがルータを指して）

function initialize(app) { 
    const routes = [ 
    '/', 
    '/login', 
    ]; 

    routes.forEach((route) => { 
    app.get(route, (req, res) => { 
     res.render('main-content.html'); 
    }); 
    }); 
} 

exports.initialize = initialize;

webpack.config .js

の

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

const nodeDir = `${__dirname}/node_modules`; 

const config = { 
    resolve: { 
    alias: { 
     react: `${nodeDir}/react`, 
     'react-dom': `${nodeDir}/react-dom`, 
     'react-router': `${nodeDir}/react-router`, 
     'react-bootstrap': `${nodeDir}/react-bootstrap`, 
     velocity: `${nodeDir}/velocity-animate`, 
     moment: `${nodeDir}/moment`, 
     slimscroll: `${nodeDir}/slimscroll`, 
    }, 
    }, 
    entry: { 
    routes: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './public/src/routes/js/main', 
    ], 
    vendors: [ 
     'react', 'react-dom', 'react-router', 'react-bootstrap', 
     'velocity', 'moment', 'slimscroll', 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'public/dist'), 
    publicPath: path.join(__dirname, 'public/dist'), 
    filename: 'bundles/[name].bundle.js', 
    chunkFilename: 'chunks/[name].chunk.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: path.join(__dirname, 'public'), 
     loader: 'react-hot', 
     }, 
     { 
     test: /\.js$/, 
     include: path.resolve(__dirname, 'public'), 
     loader: 'babel', 
     }, 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'public'), 
     loader: 'style!css-loader?modules&importLoaders=1' + 
     '&localIdentName=[name]__[local]___[hash:base64:5]', 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.optimize.CommonsChunkPlugin('vendors', './bundles/vendors.js', Infinity), 
    ], 
}; 

module.exports = config;

スクリプト

"scripts": { 
    "dev": "webpack --config webpack.config.js", 
    "hot": "webpack-dev-server --devtool eval --progress --colors --inline --hot", 
    "build": "webpack -p --config webpack.config.prod.js" 
    }

主content.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Brigad Admin Panel</title> 
    <!-- Tell the browser to be responsive to screen width --> 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> 
    <!-- Ionicons --> 
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
    <!-- Customs --> 
    <link rel="stylesheet" href="styles/global.css"> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,400italic,700,600italic,700italic,800,800italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
    </head> 

    <body class="hold-transition"> 
    <div id="content"></div> 

    <!--<script src="dist/bundles/vendors.js"></script>--> 
    <!--<script src="dist/bundles/routes.bundle.js"></script>--> 

    <script src="http://localhost:8080/public/dist/bundles/vendors.js"></script> 
    <script src="http://localhost:8080/public/dist/bundles/routes.bundle.js"></script> 
    </body> 
</html>

エントリポイント

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, browserHistory } from 'react-router'; 

import RootRoute from './components/RootRoute'; 

render(
    <Router history={browserHistory} routes={RootRoute} />, 
    document.getElementById('content') 
);

react-hot-loaderを動作させるにはどうすればよいですか？

ありがとうございます。

出典

2016-04-26 Zephir77167

これはこれまでに実現しましたか？私はそれを私のエントリールートをロードすることができますが、他のルートは動作しません。 – Tom

こんにちは、それは非常に愚かだった、私の正規表現が含まれて "/"と私はWindows上にあった – Zephir77167

乾杯。私はRHLをあきらめてしまいましたが、反応ルータをナビゲートすることができず、ウェブパック/反応/反応ルータ/ホットリロードスタック全体を動作させるのに時間が浪費しました！ – Tom