historyApiFallback, React Router v4, Webpack-Dev-Server, "Cannot get /map"

Question

I know I'm not the only one facing this issue but after searching the web for a while and trying out everything it gave me, I gotta ask for my case here.

I'm getting the popular error that I receive a 404 whenever I try to access a route of my app, when not using an app-related way. So for example if I refresh my page when I'm at "/map", it says "Cannot get /map".

This is my current configuration, although I tried several ones with different devServer: {} settings and playing with publicPath etc.:

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);

Did you try this https://stackoverflow.com/a/39968984/9034168 ? Maybe it can help — Efe, Mar 12 '18 at 10:27
Yes, I already tried just setting "historyApiFallback" to true, too. Didn't work either :( — SVARTBERG, Mar 12 '18 at 14:17

Sumit · Answer 1 · 2018-12-12T07:52:05.057

10

@SVARTBERG The following link explains the rationale behind using the webpack configuration setting --> devServer: {historyApiFallback: true }

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

You have to add "publicpath" attribute value to '/' in the output object and then add the 'devserver' property as listed below in your webpack configuration file.

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

devServer: {
    historyApiFallback: true,
  },

edited Dec 12 '18 at 07:52

answered Dec 11 '18 at 14:17

Sumit

119
2
7

From review: this does not provide an answer to the question, could you please add this as a comment to the question or the provided compete answer? – Sach Dec 11 '18 at 14:39
I added more details to my answer. Let me know if that helps. – Sumit Dec 12 '18 at 07:53
The above mentioned link has insightful explanation! – Bing Lu Jun 14 '19 at 02:12

score 0 · Answer 2 · answered Mar 13 '18 at 11:06

Did you try to use HtmlWebpackPlugin? Please first change the public path from dist to /, then in devServer change historyApiFallback to true. Finally install and require html-webpack-plugin, then add this plugin into plugins array on your config

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

historyApiFallback, React Router v4, Webpack-Dev-Server, "Cannot get /map"

2 Answers2