React Router - webpack 生产环境下刷新页面时 Route 无法正常工作

Question

我现在正在尝试部署用Webpack创建的React应用。我使用React路由器进行路由，开发模式下一切正常，但当我创建Web应用程序的生产版本时，路由器一开始也可以正常工作，但当我刷新页面时，会出现以下情况。

Not found

我不知道这是否是由webpack引起的。

这是我的webpack.common.js文件（在生产和开发版本之间相似的设置）。

const path = require("path");

module.exports = {
  context: __dirname,
  entry: {
    main: "./src/index.js",
    vendor: "./src/vendor.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: "file-loader",
          options:{
            name: "[name].[hash].[ext]",
            outputPath:"imgs"
          }
        },
      },
      {
        test:/\.svg$/,
        use: ['@svgr/webpack']
      },
        
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        exclude: /node_modules/,
        use: {
          loader: "url-loader",
        },
      },
    ],
  },
};

这是我的webpack.prod.js（webpack的生产版本）：

const path = require("path");
const common = require("./webpack.common");
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  context: __dirname,
  mode: "production",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    filename: "bundle.[contentHash].js",
  },
  optimization: {
    minimizer:[
      new OptimizeCssAssetsPlugin(), new TerserPlugin()
    ]
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/template.html"),
      // favicon: "./src/App/assets/Logo.png",
      filename: "index.html",
      minify:{
        removeAttributeQuotes: true,
        collapseWhiteSpaces: true,
        removeComments: true,
      }
    }),
  ],
})

这是提供路由的主要React文件：

import Projects from "./pages/Projects/projects.jsx";
import ContentSwitch from "./pages/Content/ContentSwitch/ContentSwitch.jsx";
import Contact from "./pages/Contact/contact.jsx";
import Foyer from "./pages/Foyer/foyer.jsx";
import Login from "./pages/Login/login.jsx";
import Error from "./pages/Error/error.js";
import UgBar from "./shared/bar/bar.jsx";
import "./scss/App.scss";
import React, {
  useRef,
  useState,
  useCallback,
  useLayoutEffect,
  useContext,
} from "react";

import { Route, Switch } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import { SearchProvider } from "./context/SearchContext.js";
import { BlurProvider } from "./context/BlurContext.js";

function App() {
  return (
    <div>
      <SearchProvider>
        <BlurProvider>
          <UgBar />
          <AnimatePresence>
            <Switch className="ug-switch">
              <Route exact path="/" component={Foyer}></Route>
              <Route path="/projects" component={Projects}></Route>
              <Route path="/content" component={ContentSwitch}></Route>
              <Route path="/contact" component={Contact}></Route>
              <Route path="/login" component={Login}></Route>
              <Route path="*" exact={true} component={Error}></Route>
            </Switch>
          </AnimatePresence>
        </BlurProvider>
      </SearchProvider>
    </div>
  );
}

export default App;

谢谢，保持安全！

- ungarmichael

---

你的浏览器只显示字符串“未找到”吗？还是它给出了404错误？ - samuei

当页面刷新时，它是针对特定路由还是所有/任何路由的？ - rustyBucketBay

@samuei 只返回字符串"Not found"，不要返回404错误。 - ungarmichael

@rustyBucketBay 刷新后每个路由都无法工作。 - ungarmichael

Answer 1

你正在使用什么类型的服务器？

我在使用nginx时遇到了这个问题。在sites-available文件中，我需要修复的那行是

try_files $uri $uri/ /index.html =404;

在服务器块中。现在它可以工作了。

- StefanBob

---

我之前使用nginx和golang cli工具，但是在使用nodejs express服务器部署后它可以正常工作了。虽然感谢您的尝试，但可能使用golang也是解决方案之一。 - ungarmichael