Webpack devserver反应路由器BrowerRouter 404

如何解决Webpack devserver反应路由器BrowerRouter 404

我知道之前已经有人问过这个问题，但是我已经与之抗争了两个小时，而且我无法找到将React Router与browserRouter和webpack dev服务器一起使用的本地开发设置的有效设置。

当我去任何不是index.html的路线时，都会收到404错误。我从这个问题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,"index.html"),}),new MiniCssExtractPlugin({
                filename: "index.css",new FileManagerPlugin({
                onEnd: {
                    copy: [
                        {
                            source: path.resolve(__dirname,"static"),destination: path.resolve(__dirname,// new BundleAnalyzerPlugin(),devServer: {
            port: 3000,// contentBase: "/",contentBase: path.resolve(__dirname,historyApiFallback: { index: "/" },node: {
            fs: "empty",mode: IS_PRODUCTION ? "production" : "development",devtool: "source-map",};

    let config = [config_dist];

    return config;
};

这里是否有使用代理的解决方案？看起来有些人没有它就可以工作。感谢您的帮助！

解决方法

在使用其他URL后，我注意到确实重定向了一个基本URL，例如：http：// localhost：3000 / asdf，在我的情况下，我正在测试具有扩展名的文件，因此它总是会失败。 / p>

要修复此问题，我只需添加：disableDotRule: true。

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

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