为什么我的路由不工作，当我上传我的webpack生产构建在线

Question

我使用React制作了这个网站，当然我使用React路由器进行路由，当我在本地主机上运行时它可以工作。现在，当我创建我的生产构建并在线上传时，点击链接到en/signup就不起作用了。显示没有找到错误页面。所以我想知道到底是哪里出了问题。我认为捆绑销售没有任何问题。顺便说一句，我正在使用Redux, React-Redux也在我的项目。

TLDR:导航到像en/signup这样的url在生产构建中不工作。

希望你们能帮我。谢谢。

Answer 1

你的webpack配置是什么样子的?

试着添加这个:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'                        // <- this right here
  },
  module: {
    rules: [
      { test: /.(js)$/, use: 'babel-loader' },
      { test: /.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {                      // <-- and this object too
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

我认为目前发生的是，如果你直接导航到一个url，因为React(和React Router)还没有加载，他们不能照顾url路由。所以浏览器导航到en/signup的静态资源，当然那里什么也没有。

因此，通过添加上面的publicPath值，您告诉它通过向根发送请求开始，然后当加载所有内容时，所请求的url将通过。

我不确定这是否就是幕后发生的事情，但我认为效果是正确的。

Answer 2

在被困在React -router上几天后，我阅读了React Training中的文档。然后我按照快速启动的步骤修改它以满足我的要求。

import {
  HashRouter as Router,
  Route,
  } from 'react-router-dom';
  <Router>
    <div>
      <Header />
      <Route exact path="/" component={Content} />
      <Route path="/:country" component={SnaContent} />
      <Footer />
    </div>
  </Router>

现在已经修复了这个问题。