Webpack-dev-server 显示具有正确路由的完整应用程序，但路由在本地主机上不起作用

Question

我正在为公司开发一个简单的 React 应用程序（所以我不能 post 编写太多代码），并且一直在使用 webpack-dev-server 进行热交换以进行开发更快速。当我运行我的应用程序在 webpack-dev-server 上用于开发目的时，我能够使用整个应用程序和路由，就像在生产中一样。当我尝试在 localhost:8080 上运行我的同一个应用程序时，我能够看到我的基本登录屏幕，然后是主页，但在那之后，路由的 none 工作并且我一直请参阅 "Cannot get /home" 等，这是一种新行为。

我发现的每个堆栈溢出问题都解决了完全相反的问题，其中 webpack-dev-server 没有显示 localhost 的所有内容，而且我发现和尝试过的都没有用。

我已经尝试重新生成 bundle.js 以确保所有的更改都被拾取，并且我检查了我的 webpack.config.js 以确保那里没有任何变化（除了我的几周前为支持热交换而添加的内容）。 Chrome Inspector 没有显示错误，所以我真的不知道为什么应用程序在本地主机上坏了，但在 webpack-dev-server 上却没有。

最后，我想要的只是让我的 React 应用程序在本地主机上看起来与在开发服务器上看起来一样，而对于我的生活，我无法弄清楚为什么它不会。

webpack.config.js:

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname+'/public',
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['react', 'es2015', 'stage-1']
            }
        },{
            test: /\.(s*)css$/,
            loader: combineLoaders([
                {
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader',
                    query: {
                        modules: true,
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                    }
                }, {
                    loader: 'sass-loader'
                },
            ])
        },
        ],
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    },
    watch: true,
    watchOptions: {
        aggregateTimeout:300,
        poll: 1000,
        ignored: /node_modules/
    }
};

Answer 1

找到我的问题 - 它存在于 server.js。这个问题的最佳答案有帮助：

需要更换：

app.get(['/', '/bom', '/items', '/products', '/segmentation'], function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

与：

app.get('*',function(req,res) {
    res.sendFile(path.resolve(__dirname,'public/index.html'));
});

这解决了我的本地主机渲染问题。

Webpack-dev-server 显示具有正确路由的完整应用程序，但路由在本地主机上不起作用

Webpack-dev-server shows full app with proper routing, but routing doesn't work on localhost

localhost

reactjs

webpack

react-router

webpack-dev-server