Веб-пакет не работает при представлении маршрутов по реакции

Question

Я использую webpack 4 для автоматизации некоторых задач для моего веб-приложения.

Страница показывает пустое состояние в рабочем режиме, когда выполняется команда: npm run build

работает с npm run start все хорошо. Дело в том, что webpack не может как-то справиться с этой частью:

<BrowserRouter><AppRoutes/></BrowserRouter>

А мой index.js выглядит так:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import AppRoutes from './routes';
require('../src/assets/styles/main.scss');
console.log("I am being called index.js...");
ReactDOM.render(<BrowserRouter><AppRoutes/></BrowserRouter>, document.getElementById("index"));

пока webpack выглядит так:

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

module.exports = (env, argv) => {
    console.log("ENV DETECTED: " + argv.mode);
    return {
        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"
                    ]
                }
            ],
        },
        plugins: [
            new CleanWebpackPlugin('dist', {}),
            new HtmlWebPackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "main.css",
                chunkFilename: "[id].css"
            }),
            require('autoprefixer'),
        ]
    }
};

Я не знаю, почему на производстве приложение вообще не показывает компоненты!

Любая помощь в этом?

Отредактировано:

Мой route.js выглядит следующим образом:

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;

если я изменю <Route exact path='/' component={Helloworld}/> на <Route path='/' component={Helloworld}/>, это работает, но у меня возникают проблемы с навигацией по другим компонентам, почему-то URL-адрес моей страницы отличается, когда я открываю index.html в рабочем режиме.

Ошибка при попытке перейти от компонента helloworld (после точного удаления из тега Route) к компоненту secondview:

DOMException: не удалось выполнить «pushState» для «History»: история объект состояния с URL 'file: /// secondview' не может быть создан в документ с источником 'null' и URL «Файл: ///home/webapp/Desktop/myapp/dist/index.html'.

Answer 1

Обслуживание приложения с Express

По сути, когда вы изменяете пути, вы удаляетесь от своего index.html, если вы не обслуживаете приложение реагирования каким-либо сервером.Попробуйте настроить экспресс-сервер для индекса с чем-то вроде этого:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets eg. js and css files
app.use(express.static(__dirname + '/public'))

// Handles all routes
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

Вы можете поместить это в свой корневой каталог как server.js, убедитесь, что на индекс ссылаются в строке sendFile (сейчас предполагается, чтоindex.html находится в каталоге / public), запустите его с babel-node server.js, и оно должно обслуживать ваше приложение на localhost: 3000.