Получение пустого экрана при развертывании сайта реакции как сервлета на tomcat

Question

Когда я пытался развернуть свое приложение реагирования как войну на tomcat, у меня возникло много проблем, и после исследования я сделал следующее:

1) npm run build

2) принял результатиз каталога сборки и поместите его в папку WebContent My DynamicWebProject

3) Развернул этот проект на tomcat из eclipse

Но он у меня не сработал, и по следующим ссылкам:

http://frugalisminds.com/react-js/deploy-react-js-in-tomcat/#comment-26210

https://www.megadix.it/blog/create-react-app-servlet/

Я сделал именно то, что было предложено, но это все равно не помогло.Поэтому я решил создать новое приложение с нуля и попробовать его, и с новым приложением оно работает как положено.

Теперь я пытаюсь понять, что не так с моим приложением!Я создал эту изолированную программную среду (не полностью подключенную - только для показа моих компонентов и структуры сайта): https://codesandbox.io/s/upbeat-fermi-0hblu

(у меня была старая изолированная программная среда, которая полностью подключена и показывает демонстрационную версию, но она не обновляется с последней версиейизменения: https://codesandbox.io/s/fragrant-morning-267l5 на всякий случай, если вы хотите увидеть, как должно выглядеть приложение)

из первой песочницы, если я сгенерирую сборку (npm run build) с использованием компонента AppTest и развернуть его (с помощью tomcat), он будет работать, как и ожидалось, но если я сделаю то же самое с компонентом App , он покажет пустую страницу без ошибок и ничего не произойдет (если я обработаю ее с: serve -s buildработает нормально) !!!проблема только в tomcat.

Что не так с моим компонентом приложения?

ПРИМЕЧАНИЕ

Если я добавлю ссылки на компоненты внутри маршрутизатора и затем нажму на эти ссылки,компоненты загружаются ... но автоматически это не так (при условии, что "/" должен загрузить его компонент):

 import React, { Component } from 'react';
import './App.css';

import Main from "./components/Main";
import Login from "./components/Login";
import ProjectCustomize from "./components/ProjectCustomize";
import {BrowserRouter, Link, Route, Switch} from "react-router-dom";


class App extends Component {

    render() {

        return (
            <div className="App">

                <BrowserRouter basename={process.env.REACT_APP_ROUTER_BASE || ''}>
                    <div>
                            <ul className="nav">
                                <li><Link to="/">Homepage</Link></li>
                                <li><Link to="/login">Login</Link></li>
                                <li><Link to="/customize">Customize</Link></li>
                            </ul>
                    <Switch>
                        <Route path="/" exact component={Main} />
                        <Route path="/login" component={Login} />
                        <Route path="/customize" component={ProjectCustomize} />
                        {/*<Redirect path="*" to="/" />*/}
                    </Switch>
                        </div>
                </BrowserRouter>

            </div>
        );
    }

}


export default App;

Обновление

Если я использую HashRouter вместо BrowserRouter, то запуск сайтаотвечаю, но при перенаправлении на другую страницу я получаю 404!

Но, тем не менее, HashRouter уродлив, потому что он вставляет # в URL.

Обходной путь

Как обходной путь, чтобы попытаться увидеть что-то хотя бы, Если я заменил в своем индексе.js с, например, тогда отображается страница, но я не могу точно перейти на другие страницы.Если я использую внутри моего index.js и внутри компонента App, у меня есть и маршрутизатор, и компонент, то при рендеринге оба компонента отображаются один над другим.Итак, я в том случае, если для того, чтобы увидеть что-то из развернутой войны, нужно предоставить некоторый контент, а не только маршрутизатор, но это вызывает проблемы