Question

我知道我不是唯一一个面对这个问题的人，但是在网上搜索了一会儿并尝试了它给我的一切之后，我得在这里问我的情况。

当我尝试访问我的应用程序的路线时，当我没有使用与应用相关的方式时，我收到了流行的错误，我收到了404。例如，如果我在“/ 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);

Answer 1

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

上的plugins数组中

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

Answer 2

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

Answer 3

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

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

3 个答案: