当我们重新加载/刷新时，封装 URL 以修复反应 js 应用程序页面上的 404 错误答案

【问题标题】：Encapsulate URL to fix 404 error on react js application page when we reload/refresh当我们重新加载/刷新时，封装 URL 以修复反应 js 应用程序页面上的 404 错误
【发布时间】：2017-09-15 11:54:54
【问题描述】：

我使用 react js 创建了一个站点。它在我的本地系统上使用 browserHistory 工作正常，但在我的生产服务器上不工作。第一次正确加载。当我刷新页面时，它给了我“找不到页面”错误。

我尝试过使用hashHistory。它解决了我的问题，但我正在寻找更好的解决方案，因为我不想要包含 # 和随机密钥的复杂 URL hashHistory。（我们希望它封装成 http://example.com/about 之类的东西，而不是 http://example.com/#/about?_k=9yfmfq 之类的东西）

我的 webpack.config.js 代码 -

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000
  }
};

在apache2中寻找解决方案。很抱歉问了一个菜鸟问题。

【问题讨论】：

所以...它是一个 node.js 应用程序？
否。在后端我有用户 WordPress。我已经从 react js 向 WordPress 发送了 axios 请求
您提供的代码是用于开发服务器的吗？您的生产配置在哪里？你使用的是 apache 或 nginx 之类的服务器吗？
您需要发布有关您的 Wordpress 设置的更多信息。你为什么使用 Wordpress？你如何使用它？您的问题是弄乱了您的 Wordpress 和 ReactJS 应用程序的路由系统。您需要正确设置它。但是，如果没有关于您的解决方案堆栈的任何信息，其他人很难回答您的问题。

标签： wordpress reactjs routes apache2

【解决方案1】：

问题是当您第一次加载yourdomain.com 时，您的服务器默认提供 index.html 文件。因此，当您尝试 yourdomain.com/something 时，您的服务器会尝试查找该文件，但由于它不存在，它将发送 404。您必须配置您的服务器以将所有页面请求重定向到 index.html 文件。

这是single page application的简单nginx配置-

location / {
    try_files $uri /index.html;
}

这会将所有 url 重定向到 index.html，它将加载您的 javascript，然后所有路由将由 javascript 处理。

【讨论】：

您好，谢谢。你能告诉我apache2服务器应该遵循什么设置吗？
你应该用谷歌搜索它为apache single page application。
好的。我会查。如果您已经知道解决方案，请分享。