Webpack devserver 反应路由器 BrowerRouter 404

Question

我知道之前有人问过这个问题，但我已经为此奋斗了几个小时，但我找不到将 React 路由器与 BrowserRouter 和 webpack 开发服务器一起使用的本地开发设置的工作设置。

当我转到 index.html 以外的任何路线时，我收到 404 错误。我尝试了从这个 blospost https://ui.dev/react-router-cannot-get-url-refresh/ 开始的问题的多种配置，但我无法使其工作。

我确实在初始控制台输出中看到了这个：

ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/danielfrg/workspace/nbviewer.js/dist
ℹ ｢wds｣: 404s will fallback to /
ℹ ｢wdm｣: Hash: 3409aa1e47265f63217d

所以我希望 404 回退到 / 但它没有那样做。

这是我的 webpack.config.js:

var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;

const extractPlugin = {
    loader: MiniCssExtractPlugin.loader,
};

module.exports = (env, argv) => {
    const IS_PRODUCTION = argv.mode === "production";

    const config_dist = {
        entry: [path.resolve(__dirname, "src", "index.js")],
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "nbviewer.js",
            publicPath: "/",
        },
        module: {
            rules: [
                {
                    test: /\.(js)$/,
                    exclude: /node_modules/,
                    use: ["babel-loader"],
                },
                {
                    test: /\.s?[ac]ss$/,
                    use: [extractPlugin, "css-loader", "sass-loader"],
                    // use: ["null-loader"],
                },
                // Bundle Jupyter Widgets and Font Awesome
                {
                    test: /\.(eot|ttf|woff|woff2|svg|png|gif|jpe?g)$/,
                    loader: require.resolve("url-loader"),
                    // loader: require.resolve("file-loader"),
                    // options: {
                    //     name: "[name].[ext]?[hash]",
                    // outputPath: "assets/",
                    // },
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "src", "index.html"),
            }),
            new MiniCssExtractPlugin({
                filename: "index.css",
            }),
            new FileManagerPlugin({
                onEnd: {
                    copy: [
                        {
                            source: path.resolve(__dirname, "static"),
                            destination: path.resolve(__dirname, "dist"),
                        },
                    ],
                },
            }),
            // new BundleAnalyzerPlugin(),
        ],
        devServer: {
            port: 3000,
            // contentBase: "/",
            contentBase: path.resolve(__dirname, "dist"),
            historyApiFallback: { index: "/" },
            publicPath: "/",
        },
        node: {
            fs: "empty",
        },
        mode: IS_PRODUCTION ? "production" : "development",
        devtool: "source-map",
    };

    let config = [config_dist];

    return config;
};

这里的解决方案是否像其他一些问题提到的那样使用代理？看起来有些人在没有它的情况下也能正常工作。感谢您的帮助！

Answer 1

在尝试了不同的 URL 之后，我注意到像 http://localhost:3000/asdf 这样的基础 url 确实被重定向了，在我的例子中，我正在测试文件有一个扩展所以它总是失败。

要修复它，我只需添加：disableDotRule: true。

      devServer: {
            port: 3000,
            contentBase: path.resolve(__dirname, "dist"),
            historyApiFallback: { index: "/", disableDotRule: true },
      }

希望这对以后的人有所帮助！

Webpack devserver 反应路由器 BrowerRouter 404

Webpack devserver react router BrowerRouter 404

webpack

react-router

webpack-dev-server