Webpack historyApiFallback、React路由器v4、网页包开发服务器；无法获取/map"；

我知道我不是唯一一个面临这个问题的人，但是在搜索了一段时间网络并尝试了它给我的一切之后，我必须在这里询问我的情况

我得到了一个流行的错误，当我尝试访问我的应用程序的路由时，我收到404，而不是使用应用程序相关的方式。例如，如果我在“/map”处刷新页面，它会显示“cannotget/map”

这是我当前的配置，尽管我尝试了几种不同的devServer:{}设置和使用publicPath等：

webpack.config.js：

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    devServer: {
        historyApiFallback: {
            index: "dist/index.html"
        }
    }
};

App.js

import React, { Component } from "react";
import { connect } from "react-redux";

import { BrowserRouter, Route } from "react-router-dom";

import Homescreen from "./Homescreen";
import Map from "./Map";

import { withStyles } from "material-ui/styles";
import Reboot from "material-ui/Reboot";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";

const styles = {
    flex: {
        flex: 1
    },
    menuButton: {
        marginLeft: -3,
        marginRight: 20
    }
};

class App extends Component {

    render() {

        const { classes } = this.props;

        return (
            <BrowserRouter>
                <div>
                    <Reboot />
                    <AppBar position="sticky">
                        <Toolbar>
                            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
                                <MenuIcon />
                            </IconButton>
                            <Typography variant="title" color="inherit" className={classes.flex}>
                                WeltRaum 31
                            </Typography>
                            <Button color="inherit">Login</Button>
                        </Toolbar>
                    </AppBar>
                    <Route exact path="/" component={Homescreen} />
                    <Route path="/map" component={Map} />
                </div>
            </BrowserRouter>
        );

    }

};

export default withStyles(styles)(App);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“react router dom”导入{BrowserRouter，Route}；
从“/Homescreen”导入主屏幕；
从“/Map”导入地图；
从“材质ui/样式”导入{withStyles}；
从“物料界面/重新启动”导入重新启动；
从“物料界面/AppBar”导入AppBar；
从“物料界面/工具栏”导入工具栏；
从“材料界面/排版”导入排版；
从“物料界面/按钮”导入按钮；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面图标/菜单”导入菜单图标；
常量样式={
弹性：{
弹性：1
},
菜单按钮：{
边缘左：-3，
marginRight:20
}
};
类应用程序扩展组件{
render（）{
const{classes}=this.props；
返回(
韦尔特拉姆31
登录
);
}
};
导出默认样式（样式）（应用程序）；

您是否尝试使用HtmlWebpackPlugin？ 请先将公共路径从

dist

更改为

/

，然后在

devServer

中将

historyApiFallback

更改为

true

。最后安装并需要

html网页包插件

，然后将此插件添加到配置文件的插件数组中

  plugins: [
    new HtmlWebpackPlugin({
      template: 'dist/index.html'
    })
  ]

---

你试过使用HtmlWebpackPlugin吗？ 请先将公共路径从

dist

更改为

/

，然后在

devServer

中将

historyApiFallback

更改为

true

。最后安装并需要

html网页包插件

，然后将此插件添加到配置文件的插件数组中

  plugins: [
    new HtmlWebpackPlugin({
      template: 'dist/index.html'
    })
  ]

---

哇，突然间，当我尝试@Efe的解决方案时，它成功了。但只有当我有devServer:{historyApiFallback:true}时。正因为如此，我删除了他再次建议的插件，即使没有它，它也会突然起作用。很抱歉，但我不能接受这个回答。谢谢你。不知道现在真正的问题是什么…

哇，突然之间，当我从@Efe尝试解决方案时，它成功了。但只有当我有devServer:{historyApiFallback:true}时。正因为如此，我删除了他再次建议的插件，即使没有它，它也会突然起作用。很抱歉，但我不能接受这个回答。谢谢你。不知道现在真正的问题是什么…

@SVARTBERG下面的链接解释了使用webpack配置设置-->devServer:{historyApiFallback:true}

您必须将“publicpath”属性值添加到输出对象中的“/”，然后在您的网页包配置文件中添加“devserver”属性，如下所示

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },

devServer: {
    historyApiFallback: true,
  },

---

@SVARTBERG下面的链接解释了使用webpack配置设置-->devServer:{historyApiFallback:true}背后的原理

您必须将“publicpath”属性值添加到输出对象中的“/”，然后在您的网页包配置文件中添加“devserver”属性，如下所示

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },

devServer: {
    historyApiFallback: true,
  },

---

你试过这个吗？也许这会有帮助是的，我也试过把“historyApiFallback”设置为真。也不起作用：（你试过这个吗？也许它能帮上忙是的，我也试过将“historyApiFallback”设置为true。也不起作用：（来自评论：这并没有提供问题的答案，请您将此作为对问题的评论或提供的竞争答案添加？我在我的答案中添加了更多详细信息。请让我知道这是否有帮助。上面提到的链接有深刻的解释！来自评论：这并没有提供问题的答案，请您添加此内容。）作为对问题或提供的答案的评论？我在答案中添加了更多细节。如果有帮助，请告诉我。上面提到的链接有深刻的解释！