score:16

Accepted answer

if you use webpack in your project, please add output.publicpath = '/' and devserver.historyapifallback = true in your webpack config file.

more info: react-router urls don't work when refreshing or writting manually

score:-1

i had similar issue. had to remove the contentbase line from devserver configuration in webpack.config.js.

this is my webpack.config.js:

var path = require("path");

module.exports = {
  devtool: 'inline-source-map',
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicpath: "/assets/",
    filename: "bundle.js"
  },
  devserver: {
    port: 9002
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  }
};

score:0

i struggled a couple hours to fix this issue. there is a just simple code that you have to add. just follow the instruction of below. if you face problem to browse from specific url to another url, you will be able to fix that also. if you would like to configure from webpack config file, then write below's code.

devserver: {
    historyapifallback: true
}

and if you would like to run by cli command, then use the below's code.

"start": "webpack-dev-server --history-api-fallback"

it worked for me. i had not to do anything else to fix this issue like meta tag or something else.

score:0

if you're using rails and webpacker and get this error, note that the initializer config/initializers/content_security_policy.rb has a content security policy for rails.env.development. changing :https to :http on that line solved the error for me. (and remember that localhost is not the same as 127.0.0.1 as far as the csp is concerned.)

score:0

adding output: { ..., publicpath: "/", } and devserver: { historyapifallback: true } worked

in webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
    publicpath: "/", // ++ 
  },
  target: "web",
  devserver: {
    port: "6060",
    static: ["./public"],
    open: true,
    hot: true,
    livereload: true,
    historyapifallback: true, // ++
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      // css rules
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};


Related Query

More Query from same tag