reactjs - React Router - 路由在 webpack 生产构建中无法刷新

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;

谢谢你，注意安全!

Answer 1

您使用的是哪种服务器？

我在使用 nginx 时遇到了这个问题。在可用站点文件中，我必须修复的行是

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

在服务器 block 中。现在可以了。