historyApiFallback，React Router v4，Webpack-Dev-Server，“无法获取 /map”答案

【问题标题】：historyApiFallback, React Router v4, Webpack-Dev-Server, "Cannot get /map"historyApiFallback，React Router v4，Webpack-Dev-Server，“无法获取 /map”
【发布时间】：2018-08-20 06:47:24
【问题描述】：

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

当我尝试访问我的应用程序的路由时，如果不使用与应用程序相关的方式，我会收到一个 404 的流行错误。例如，如果我在“/map”刷新页面，它会显示“无法获取/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);

【问题讨论】：

你试过这个stackoverflow.com/a/39968984/9034168 吗？也许它可以帮助
是的，我也已经尝试将“historyApiFallback”设置为 true。也没有用:(

标签： webpack react-router webpack-dev-server react-router-v4 react-router-dom

【解决方案1】：

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

https://tylermcginnis.com/react-router-cannot-get-url-refresh/

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

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

devServer: {
    historyApiFallback: true,
  },

【讨论】：

来自评论：这没有提供问题的答案，您能否将其添加为问题的评论或提供的竞争答案？
我在回答中添加了更多细节。让我知道这是否有帮助。
上述链接有深刻的解释！

【解决方案2】：

您是否尝试过使用 HtmlWebpackPlugin？请先将公共路径从dist 更改为/，然后在devServer 中将historyApiFallback 更改为true。最后安装并要求html-webpack-plugin，然后将此插件添加到配置中的插件数组中

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

【讨论】：

【解决方案3】：

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

【讨论】：