ルーティングの問題は、私は次のように私のアプリでルーティングのWebPACK

Question

と反応します。 私は問題は、メインページがルート

<Route path='main' component={Maintainer} />  

にロードされた後、ブラウザの場所でコンテンツになるということであるhttp://...com/ で私のアプリにアクセスすることができます。このときhttp://...com/main

、私はページをリロードした場合URL（http://...com/main）ページが見つかりませんでした： "要求されたURL/mainがこのサーバー上に見つかりませんでした。"ここで

私webpack.production.config.js

var webpack = require('webpack'); 
var path = require('path'); 
var loaders = require('./webpack.loaders'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var WebpackCleanupPlugin = require('webpack-cleanup-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

loaders.push({ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract({fallback: 'style-loader', use : 'css-loader?sourceMap&localIdentName=[local]___[hash:base64:5]!sass-loader?outputStyle=expanded'}), 
    exclude: ['node_modules'] 
}); 

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    publicPath: './',  
    path: path.join(__dirname, 'public'), 
    filename: '[chunkhash].js' 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    module: { 
    loaders 
    }, 
    plugins: [ 
    new WebpackCleanupPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: '"production"' 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false, 
     screw_ie8: true, 
     drop_console: true, 
     drop_debugger: true 
     } 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'style.css', 
     allChunks: true 
    }), 
    new HtmlWebpackPlugin({ 
     template: './index.html', 
     files: { 
     css: ['style.css'], 
     js: ['bundle.js'], 
     } 
    }) 
    ] 
}; 

しかし、私は、ローカルサーバー上で実行する場合は、このような問題はありません。

"use strict"; 
var webpack = require('webpack'); 
var path = require('path'); 
var loaders = require('./webpack.loaders'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var DashboardPlugin = require('webpack-dashboard/plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const HOST = process.env.HOST || "127.0.0.1"; 
const PORT = process.env.PORT || "3000"; 

loaders.push({ 
    test: /\.scss$/, 
    loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'], 
    exclude: ['node_modules'] 
}); 

module.exports = { 
    entry: [ 
    'react-hot-loader/patch', 
    './src/index.js', // your app's entry point 
    ], 
    devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map', 
    output: { 
    publicPath: '/', 
    path: path.join(__dirname, 'public'), 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    module: { 
    loaders 
    }, 
    devServer: { 
    contentBase: "./public", 
    // do not print bundle build stats 
    noInfo: true, 
    // enable HMR 
    hot: true, 
    // embed the webpack-dev-server runtime into the bundle 
    inline: true, 
    // serve index.html in place of 404 responses to allow HTML5 history 
    historyApiFallback: true, 
    port: PORT, 
    host: HOST 
    }, 
    plugins: [ 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'style.css', 
     allChunks: true 
    }), 
    new DashboardPlugin(), 
    new HtmlWebpackPlugin({ 
     template: './index.html', 
     files: { 
     css: ['style.css'], 
     js: [ "bundle.js"], 
     } 
    }), 
    ] 
}; 

私もそれを試着node.js Webサーバーと同じ問題が発生しました。

contentBase： "./public"はそれを作ったのですか？

おかげ

coolshare

Answer 1

ヴィンセントの提案で、私は部分的に私のApache設定

DocumentRoot /var/www 

    Redirect permanent /main http://...com/ 

にこの作品をいくつかのリダイレクトを追加しました：Apacheは問題があることであるhttp://...com/

へのルートhttp://...com/mainをしましたそれ以降はReactが引き継ぎますが、私は予想したものではなくログイン画面にルーティングします - 現在の画面に留まるhttp://...com/mainブラウザページをリロードするとき。

"このURLをindex.htmlにルーティングすると、JSルータが有効になり、正しいページが表示されます。真実ではない：私は

Redirect permanent /main http://...com/index.html 

を試してみましたが、Apacheがhttp://...com/index.html

しかし、Apacheの

を認識しなかったことは、メインページへのルートにそれをする方法を思わない...

は