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

Question

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

每当我尝试访问我的应用程序的路线时，我都会收到一个流行的错误，即在不使用与应用程序相关的方式时收到 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"
        }
    }
};

应用程序.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);

Answer 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,
  },