ReactJS构建后无法直接访问URL问题（Webpack 4.2.0）

你遇到的是单页应用（SPA）里常见的路由 fallback 问题——当使用history模式的路由（比如React Router的BrowserRouter）时，直接访问子路由（比如/about）会返回404，因为服务器不知道该返回哪个文件，只有先进入首页（/）后，前端路由才能正常接管页面跳转。下面分开发环境和生产环境给你针对性的解决方案：

一、开发环境（webpack-dev-server） #

在你的Webpack配置中添加devServer.historyApiFallback配置，让所有404请求都重定向到index.html，这样前端路由就能处理子路由请求了。

修改你的Webpack配置文件，补充关键配置项：

var webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src/');
var CSS_DIR = path.resolve(__dirname,'public/css');

module.exports = {
  // 入口配置（根据你的实际项目调整）
  entry: `${APP_DIR}/index.js`,
  // 输出配置
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/' // 关键：设置为根路径，确保路由切换时资源加载正确
  },
  // devServer核心配置
  devServer: {
    historyApiFallback: true, // 让所有404请求返回index.html
    contentBase: BUILD_DIR,
    hot: true
  },
  plugins: [
    new HtmlPlugin({
      template: path.resolve(__dirname, 'public/index.html'), // 你的HTML模板路径
      filename: 'index.html',
      inject: 'body'
    })
    // 其他插件...
  ]
  // loader等其他配置...
};

二、生产环境部署 #

当你把构建后的代码部署到正式服务器时，需要配置服务器的重写规则，让所有请求都指向index.html，以下是常见服务器的配置示例：

Nginx配置 #

在你的Nginx站点配置中添加try_files规则：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/build/folder;

  location / {
    try_files $uri $uri/ /index.html; # 找不到文件就返回index.html
  }
}

Apache配置 #

在项目根目录创建或修改.htaccess文件：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

额外提醒 #

确保你的前端路由使用的是history模式（比如React Router的BrowserRouter），如果用的是HashRouter（URL带#的路由），不会出现这个问题，但URL会带有#，用户体验不如history模式。

内容的提问来源于stack exchange，提问作者stefun