リアクタルーターが動作しないようにします

Question

私はウェブパック、リアクション、フラックス、リアルーター設定を持っています。

ReactDOM.render((
    <Router history={hashHistory}> 
    <Route path="/" component={Photos} onEnter={someAuthCheck}> 
     <Route path="/login" component={Login}></Route> 
    </Route> 
    </Router> 
),document.getElementById('app')); 

私は私が手ブラウザでhttp://localhost:8080/loginを書くとき：

Cannot GET /login 

ではなく、私のログインダイアログ 私はWebPACKのdevのサーバー上で実行している私は、これら二つのルートを持っています。私は何を正しくしていないのですか？

私のWebPACKの設定：あなたはhashHistoryを使用している

var webpack = require('webpack'); 
var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

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

var config = { 
    resolve: { 
    alias: { 
     jquery: "jquery/src/jquery" 
    } 
    }, 
    entry: { 
    main: APP_DIR + '/index.jsx', 
    }, 
    output: { 
    publicPath: "/src/client/public/", 
    path: BUILD_DIR, 
    filename: '[name].js' 
    }, 
    module : { 
    loaders : [ 
     { test : /\.jsx?/, include : APP_DIR, loader : 'babel-loader' }, 
     { test: /.(woff|woff2|eot|ttf)$/, loader:"url-loader?prefix=font/&limit=5000" }, 
     {test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')} 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("[name].css"), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }), 
    new HtmlWebpackPlugin({ 
     title: 'PhotoTank', 
     template: 'src/client/app/html-template.ejs', 
     filename: '../index.html' 
    }) 
    ], 

    devServer: { 
    //publicPath: "/src/client/public/", 
    //historyApiFallBack: true, 
    // progress: true, 
    //hot: true, 
    //inline: true, 
    // https: true, 
    //port: 8081, 
    contentBase: path.resolve(__dirname, 'src/client'), 
    proxy: { 
     "/api": { 
      target: "http://localhost:5000", 
      pathRewrite: {"^/api" : ""} 
     } 
    } 
    }, 

}; 

module.exports = config; 

Answer 1

通常、Cannot GETエラーが発生した場合は、webpack-dev-serverの問題です。 docsから：あなたには、いくつかの決まり文句を使用している、またはあなたがする生産ビルド用に別のWebPACKの設定を作成する必要があれば

To prepare, make sure you have a index.html file that points to your bundle. Assuming that output.filename is bundle.js: <script src="/bundle.js"></script>

、あなたは通常npm run buildと呼ばれる、最初のindex.htmlファイルを生成するためにWebPACKのを使用する必要がありますそう。

また、上記の指示に従って空のindex.htmlファイルを作成するだけです。

---

はまたあなたのreact-routerに構成されたいくつかの問題があります。

<Route path="/login" component={Login}></Route> 

が

<Route path="login" component={Login}></Route> 

は、子供のルートでスラッシュの前に存在してはならないはずです。

/loginにアクセスする場合は、hashHistoryの代わりにbrowserHistoryを使用する必要があります。

Answer 2

、その代わりに、この

http://localhost:8080/login

オープンの：それは動作します

http://localhost:8080/#/login。

From Doc：

Hash history uses the hash (#) portion of the URL, creating routes that look like example.com/#/some/path.

hashHistoryとbrowserHistoryの違いをお読みください。