Why does react router dom not find the page when refreshing the page?

Question

React

What is the problem?

webpack.config

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: "url-loader?limit=100000",
      },
    ],
  },
};

router

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

<Router>
        <>
          <div className="site">
            <div className="site-content">
              <Header />
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/apps/" component={List} />
                <Route exact path="/app/:slug" component={Detail} />
              </Switch>
            </div>
            <Footer />
          </div>
        </>
</Router>

upd: It was in Django. Front was connected as a standalone django app. The front returned an empty index.html template in views, returned the template only by an empty path, because of this, when the page was updated, it did not pass index.html. I just separated the front and back using core for Django.

Answer 1

https://stackoverflow.com/questions/40332753/react...

Answer 2

Add this set of options to your webpack.config.js

devServer: {
    historyApiFallback: true,
  },

Answer 3

What page? The question is not clear.
Try this, if I understood correctly from the words of the fortuneteller.
<Route path="/app/:slug" component={Detail} />