Блог

У меня есть приложение React, которое я создал, создало следующие файлы:

Я пытаюсь добавить это приложение на существующую веб-страницу, поэтому я создал новую страницу со следующим содержимым:

 <div id="root"></div>
<script type="text/javascript" src="components/duel-arena/assets/vendor.280c86f1de98563a3339.js"></script>
<script type="text/javascript" src="components/duel-arena/assets/app.280c86f1de98563a3339.js"></script>
  

Как вы можете видеть, я поместил приложение JS и ресурсы в components/duel-arena папку.

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

 app.280c86f1de98563a3339.js:1 GET http://localhost/5.css net::ERR_ABORTED 404 (Not Found)
(anonymous) @ app.280c86f1de98563a3339.js:1
l.e @ app.280c86f1de98563a3339.js:1
./src/index.js @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
1 @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
app.280c86f1de98563a3339.js:1 GET http://localhost/assets/5.87b190c482f47b4374bd.js net::ERR_ABORTED 404 (Not Found)
l.e @ app.280c86f1de98563a3339.js:1
./src/index.js @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
1 @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
app.280c86f1de98563a3339.js:1 GET http://localhost/4.css net::ERR_ABORTED 404 (Not Found)
(anonymous) @ app.280c86f1de98563a3339.js:1
l.e @ app.280c86f1de98563a3339.js:1
./src/index.js @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
1 @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
app.280c86f1de98563a3339.js:1 GET http://localhost/assets/4.49d3cfaa7b81bae88c40.js net::ERR_ABORTED 404 (Not Found)
l.e @ app.280c86f1de98563a3339.js:1
./src/index.js @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
1 @ app.280c86f1de98563a3339.js:36786
l @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
(anonymous) @ app.280c86f1de98563a3339.js:1
app.280c86f1de98563a3339.js:1 Uncaught (in promise) Error: Loading CSS chunk 5 failed.
(./5.css)
    at HTMLLinkElement.n.<computed>.n.<computed>.<computed>.o.push.n.<computed>.f.onerror (app.280c86f1de98563a3339.js:1)
  

Я попытался изменить свою историю реакции / маршрутизатор с помощью пути, но безуспешно:

 const renderApp = async Component => {
  const historyConfig = {
    basename: 'components/duel-arena/'
  };
  const browserHistory = createBrowserHistory(historyConfig);
  const routeStore = new RouterStore();
  const history = syncHistoryWithStore(browserHistory, routeStore);

    render(
        <AppContainer>
            <Router history={history} basename={'/components/battle-arena'}>
                <Provider store={isProduction ? store : hotRehydrate()} routing={routeStore} >
                    <App />
                </Provider>
            </Router>
        </AppContainer>,
        document.getElementById('root')
    );
};
  

Есть идеи, что мне не хватает для работы моего приложения на моей веб-странице?