はWebPACKの

Question

を使用してアプリケーションを構築した後に動作していないルートに反応リアクト（NPM開始）

私はWebPACKのサーバを使用してアプリケーションを実行していたときに

ルートが正常に動作しているのWebPACK使用してアプリケーションを構築した後に動作していないルートwebpack.configファイル

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     'index': [ 
      'webpack-dev-server/client?http://localhost:8080/', 
      'webpack/hot/only-dev-server', 
      './index.jsx' 
     ] 
    }, 
    output: { 
     path: __dirname, 
     filename: "[name].js", 
     publicPath: 'http://localhost:8881/', 
     chunkFilename: '[id].chunk.js', 
     sourceMapFilename: '[name].map' 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx', '.es6'], 
     modulesDirectories: ['node_modules'] 
    }, 
    module: { 
     loaders: [ 
      {test: /\.jsx$|\.es6$|\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/}, 
      {test: /\.scss$|\.css$/, loader: 'style-loader!style!css!sass'} 
     ] 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ], 
    devtool: "eval-source-map", 
    devServer: { 
     port: 8080, 
     historyApiFallback: { 
      index: '/' 
     } 
    }, 
    externals: { 
     'Config': JSON.stringify({ 
      serverUrl: "http://pss/", 
      authSuccessUrl: "http://localhost:8881/loginSuccess", 
      podioClientId: "property-seller-solutions" 
     }) 
    } 
}; 

package.jsonファイル：

の

{ 
    "name": "pss", 
    "version": "0.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --config ./webpack.config.js --hot --port 8080" 
    }, 
    "author": "", 
    "license": "BSD-2-Clause", 
    "devDependencies": { 
    "babel": "~6.5.2", 
    "babel-core": "~6.9.1", 
    "babel-loader": "~6.2.4", 
    "babel-preset-es2015": "~6.9.0", 
    "babel-preset-react": "~6.5.0", 
    "babel-preset-stage-0": "~6.5.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-html-replace": "^1.6.1", 
    "gulp-react": "^3.1.0", 
    "gulp-uglify": "^1.5.4", 
    "history": "~3.0.0", 
    "react": "~15.1.0", 
    "react-dom": "~15.1.0", 
    "react-hot-loader": "~1.3.0", 
    "webpack": "~1.13.1", 
    "webpack-dev-server": "~1.14.1" 
    }, 
    "dependencies": { 
    "chart.js": "^2.1.6", 
    "connect-history-api-fallback": "~1.2.0", 
    "halogen": "^0.2.0", 
    "highcharts": "^4.2.5", 
    "react-d3-basic": "^1.6.11", 
    "react-infinite-scroll-component": "^1.4.1", 
    "react-infinite-scroll-es2015": "^1.0.0" 
    } 
} 

の.htaccessファイル： - 私はコピー

index.jsとのindex.html

RewriteBase/
RewriteRule ^index\.html$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.html [L] 

アプリを（WebPACKの--hot --inline）を構築した後、2つの出力ファイルを得ました2つのファイルと.htaccessファイルをローカルホストのルートフォルダにコピーします。

インデックスルートが正常に動作している

...（http://localhost）が、私はhttp://localhost/homeにその示す「404見つかりません」エラー（要求されたURL /ホームは、このサーバー上に見つかりませんでした。）

をリダイレクトしようとしています私はWebPACKのサーバ（NPM開始）を使用してアプリケーションを実行していたときに

これらのルートは正常に動作している - 私の理解にhttp://localhost:8080/home

Answer 1

Worked。

RewriteEngine On 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule^- [L] 

RewriteRule^/index.html [L] 

とのWebPACKを使用してプロジェクトを構築するには、次のターミナルコマンドを使用：

webpack --inline --history-api-fallback --progress -p 

Answer 2

をあなたはhttp://localhost:8080/homeを言うならば、それはサーバ側のルータの呼び出しを行ったでしょう。あなたはそれのセットアップこれは、最初に、

https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

Answer 3

あなたは/家を訪問したときのindex.htmlを提供するためにアプリを設定する必要があります必要があります。