模块联合应用程序和React Bootstrap

Question

我是模块联盟的新手。所以我有一个非常基本的问题，关于构建一个 React 应用程序来支持模块联合。

所以我有index.js作为

import('./bootstrap');
export { };

bootstrap.jsx 作为

import ReactDOM from 'react-dom';
import BootstrapApp from './BootstrapApp';
ReactDOM.render(<BootstrapApp />, document.getElementById("root"))

BootstrapApp.js

import App from './App';

function BootstrapApp() {
  return (
    <>
      <App />

    </>
  );
}

export default BootstrapApp;

我的App.js如下

import { Route, Routes, BrowserRouter } from 'react-router-dom';
import {HashRouter as Router} from 'react-router-dom';
import React, { useEffect, useState } from 'react';

function App() {
  return (
    <ThemeProvider theme={theme}>
    <div>HOST APP: <br /></div>
    <Router>
      <Route exact path="/my-inquiry">
        <MyInquiryWrapper />
      </Route>
    </Router>
    </ThemeProvider>
  );
}

export default App;

现在我的问题是对于大多数 React 应用程序，我还没有看到 BootstrapApp 包装器。

BootstrapApp 是模块联合实施所必需的吗？

还在一些项目的BootstrapApp中，我看到了下面的定义；

<Router>
          <Routes>
            <Route path='/*' element={<App />}></Route>
          </Routes>
      </Router>

这是否也与模块联合有关或模块联合不需要？

Answer 1

现在我的问题是对于大多数 React 应用程序，我还没有看到

BootstrapApp

包装纸。

模块所需的

BootstrapApp

也是如此 联邦实施？

不，

BootstrapApp

似乎仅作为保存某些全局应用程序状态和/或逻辑以提供给您的

App

组件的方式存在。您可以在问题的下一部分中看到这一点：

另外在一些项目的BootstrapApp中，我在下面看到了 定义；

<Router>
  <Routes>
    <Route path='/*' element={<App />}></Route>
  </Routes>
</Router>

这里

BootstrapApp

组件正在使用路由器渲染和包装

App

组件，因此由

App

渲染的整个子 ReactTree 都具有可用的路由上下文。这允许所有

Routes

、

Route

、

Link

、

NavLink

等组件以及所有 React-Router-DOM 挂钩正常工作。

另请注意，无需在路线本身上渲染

App

，只需渲染为

Router

的子级/后代就足够了。

完整示例：

import { BrowserRouter as Router } from 'react-router-dom';
...
import App from './App';

function BootstrapApp() {
  // any global business logic/loaders/etc

  return (
    // ...additional Context providers, etc...
      <Router>
        <App />
      </Router>
    //...
  );
}

export default BootstrapApp;