Routing issue in React with Webpack - reactjs

Question

I routed in my app as the following:
render(
<Provider store={store}>
<Router history={browserHistory }>
<Route path={"/" component={TopContainer}>
<IndexRoute component={Login} />
<Route path='main' component={Maintainer} />
</Route>
</Router>
</Provider>,
document.getElementById('root')
)
Then I deploy my production bundle.js and index.html directly under my web root (apache in ubuntu).
I can access my app at http://...com/
The problem is that after the main page is loaded with route
<Route path='main' component={Maintainer} />
the content in browser location becomes: http://...com/main
At this time, if I reload the page with the url (http://...com/main) I got a page not found error: "The requested URL /main was not found on this server."
Here the my 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'],
}
})
]
};
But if I run it on the local server, there is not such a problem:
"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"],
}
}),
]
};
I also tried it on a node.js web server and got the same problem.
Is the contentBase: "./public" made it?
thanks
coolshare

Answer 1

With Vincent's suggestion, I added some redirects to my Apache config
DocumentRoot /var/www
Redirect permanent /main http://...com/
This work partially: Apache did route http://...com/main to http://...com/
The problem is that from then on React takes over but it routes it to the login screen instead of what I expected - stay in the current screen http://...com/main when reload the browser page.
"If you route this URL to your index.html then the JS router will activate and display the correct page." is not true: I tried
Redirect permanent /main http://...com/index.html
and Apache did not recognize the http://...com/index.html
But Apache
It seems no way to route it to the main page...