라우팅 문제는 내가 다음과 같은 내 응용 프로그램에 전달 웹팩

Question

과 반응. 나는 http://...com/ 문제입니다에 내 응용 프로그램에 액세스 할 수 메인 페이지는 경로로로드 된 후

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

브라우저 위치의 내용이된다 :이 때 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 웹 서버에 동일한 문제가 발생했습니다.

contentBase는 "./public"입니까?

감사

coolshare는

빈센트의 제안으로

Answer 1

, 나는

DocumentRoot /var/www 

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

이 작품은 부분적으로 내 아파치 설정에 약간의 리디렉션을 추가 :

문제가 있다는 것입니다 아파치가 http://...com/에 경로 http://...com/main했다 그때부터 React는 처리하지만 예상했던 것 대신 로그인 화면으로 라우트합니다 - 현재 화면에 머무르십시오 http://...com/main 브라우저 페이지를 다시로드 할 때.

"이 URL을 index.html로 라우팅하면 JS 라우터가 활성화되어 올바른 페이지를 표시합니다." 사실이 아니다 : 나는

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

을 시도하고 아파치 그것은 메인 페이지로 경로를 할 수있는 방법을 보인다

...