Javascript 反应-将应用程序嵌入现有页面（web服务器中的子文件夹）

我构建了一个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>

我试图用路径修改我的反应历史记录/路由器，但没有成功：

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')
    );
};

const renderApp=async Component=>{
常量历史配置={
basename:'组件/决斗场/'
};
const browserHistory=createBrowserHistory（historyConfig）；
const routeStore=新路由存储（）；
const history=syncHistoryWithStore（浏览器历史记录、路由存储）；
渲染(
,
document.getElementById（'root'））
);
};

---

知道我是什么；我的应用程序无法在我的网页中运行？

似乎您的web服务器找不到您包含的js文件。您是否检查了此问题？@PeterLehnhardt这是关于…。@M.Abdeldayem是的，如果您可以更改页面的

index.html

，则使用

base href

有效，但是我只是想把一个组件嵌入到一个现有的网页中，我不能完全使用基本href。

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')
    );
};