React Route не отображает компонент на производстве

Question

Я разрабатываю React Webapp и использую веб-пакет для автоматизации некоторых задач.Режим разработки работает нормально, я вижу все компоненты, но когда я открываю index.html из папки / dist, где у меня есть один и тот же каталог bundle.js и bundle.css, веб-приложение не показывает компоненты.

Я пытался загрузить на веб-сервер apache всю папку / dist и пытался получить доступ как localhost / dist, но я не вижу компонентов.

Любая идея, как сделать так, чтобы файлы в папке dist я мог использоватьФактически именно поэтому я использую веб-пакет для автоматизации задач, поэтому я могу использовать эту папку для производства.

Веб-пакет:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = (env, argv) => {
    console.log("ENV DETECTED: " + argv.mode);
    return {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
            //publicPath: '/', // Remove this when running in production
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: [
                        {
                            loader: "html-loader",
                            options: {
                                minimize: true
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        // 'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                minimize: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                config: {
                                    path: './postcss.config.js'
                                }
                            }
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        argv.mode !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                minimize: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                config: {
                                    path: './postcss.config.js'
                                }
                            }
                        },
                        "sass-loader"
                    ]
                }
            ],
        },
        devServer: {
            historyApiFallback: true,
        },
        plugins: [
            new CleanWebpackPlugin('dist', {}),
            new HtmlWebPackPlugin({
                template: "src/index.html",
                filename: "./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "bundle.css",
                chunkFilename: "bundle.css"
            }),
            require('autoprefixer'),
        ]
    }
};

Маршруты:

import React from "react";
import { Switch, Route } from 'react-router-dom';
import Helloworld from './components/helloworld/helloworld.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from "./components/thirdview/thirdview.component";

const AppRoutes = () => (
    <main>
        <Switch>
            <Route exact path='/' component={Helloworld}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/thirdview' component={ThirdView}/>
            <Route path='/thirdview/:number' component={ThirdView}/>
        </Switch>
    </main>
);

export default AppRoutes;

Helloworldкомпонент:

import React from 'react';
import HelloworldApi from './helloworld.api';
import { Link , withRouter } from 'react-router-dom';
require('./helloworld.style.scss');

class Helloworld extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            persons: [],
        };
    }

    componentDidMount() {
        console.log("I am being called helloworld component...");
        HelloworldApi.getAll().then(response => {
            if (response.data) {
                console.log(response.data);
                const persons = response.data;
                this.setState({persons});
            } else {
                console.log(response);
            }
        });
    }

    render() {
        return (
            <div className={"boxDiv"}>
                <p>Helloworld components</p>
                <h1>Hello World</h1>
                <h3>Web pack and React aree awesome together!!! test</h3>
                {this.state.persons.map(person => <li>{person.name}</li>)}

                <Link to='/secondview'>go to secondview</Link>
            </div>
        );
    }
}

export default withRouter(Helloworld);