Javascript 反应器&；反应路由器：PWA白色页面

我正在用React JS开发一个web应用程序。当ppl出现在我的网站上时，一切正常。但是，当他们尝试向主屏幕添加我的应用程序（就像他们为pwa所做的那样）时，出现了一个错误：事实上，当他们添加具有这种路径的页面时，会出现一个白色页面弹出。 我想这是因为浏览器试图将javascript文件置于而不是在下面

当我在浏览器上重新加载时，我现在没有问题了。我在重新加载这种类型的页面时遇到了这个问题，但我通过几种方法解决了这个问题：

• 在index.html上添加“”
• 在webpack.config.js中添加“publicPath:'/'”

我的webpack.config.js文件：

const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
    devServer: {
      historyApiFallback: true,
    },
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test:  /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader',
                ],
            }
        ]
    },
    plugins: [
        new Dotenv()
    ]
};

我的路线：

import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Home from "./src/pages/Home";
import Dashboard from "./src/pages/Dashboard";
import SecondStep from "./src/pages/Roster/Creation/SecondStep";
import Login from "./src/components/auth/Login";
import FirstStep from "./src/pages/Roster/Creation/FirstStep";
import Show from "./src/pages/Roster/RosterItem/Show";
import Registration from "./src/components/auth/Registration";
import Lists from "./src/pages/Roster/RosterItem/Lists";
import Parameters from "./src/pages/Roster/Parameters";
import NotFound from "./src/pages/NotFound";
import React from "react";
import configureHistory from "./configureHistory";

function Routes() {
    const history = configureHistory();
    return(
        <Router history={history}>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/dashboard" exact component={Dashboard} />
                <Route path="/step/second" exact component={SecondStep} />
                <Route path="/login" exact component={Login} />
                <Route path="/step/first" exact component={FirstStep} />
                <Route path="/group" exact component={Show} />
                <Route path="/register" exact component={Registration} />
                <Route path="/group/lists" exact component={Lists} />
                <Route path="/group/parameters" exact component={Parameters} />
                <Route component={NotFound} />
            </Switch>
        </Router>
    )
}

export default Routes;

从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/src/pages/Home”导入主页；
从“/src/pages/Dashboard”导入仪表板；
从“/src/pages/花名册/创建/SecondStep”导入第二步；
从“/src/components/auth/Login”导入登录名；
从“/src/pages/花名册/Creation/FirstStep”导入第一步；
从“/src/pages/花名册/RosterItem/Show”导入显示；
从“/src/components/auth/Registration”导入注册；
从“/src/pages/花名册/RosterItem/Lists”导入列表；
从“/src/pages/花名册/Parameters”导入参数；
从“/src/pages/NotFound”导入NotFound；
从“React”导入React；
从“/configureHistory”导入配置历史记录；
函数路由（）{
const history=configureHistory（）；
返回(
)
}
导出默认路径；

有什么想法吗？ 非常感谢