在具有微前端概念的应用程序中动态注册路由时出现的问题

如何解决在具有微前端概念的应用程序中动态注册路由时出现的问题

我有一个使用微前端概念的 Typescript + Redux（带有 RTK）应用程序。构建的所有步骤均来自本教程：Microfrontends tutorial。

主要组件是Microfrontend.tsx（省略导入）：

interface Manifest {
  files: {
    'main.js': string
    'main.js.map': string
    'index.html': string
  }
  entrypoints: string[]
}

const MicroFrontend = ({
  name,host,module
}: {
  name: string
  host: string | undefined
  module: string
}) => {
  const history = useHistory()

  useEffect(() => {
    const renderMicroFrontend = () => {
      // @ts-ignore
      window[`render${name}`] && window[`render${name}`](`${name}-container`,history)
    }

    if (document.getElementById(name)) {
      renderMicroFrontend()
      return
    }

    const manifestUrl = `${
      isDevProfile ? host : ''
    }/${module}/view/asset-manifest.json`

    fetch(manifestUrl)
      .then(res => res.json())
      .then((manifest: Manifest) => {
        const script = document.createElement('script')
        script.id = name
        script.crossOrigin = ''
        script.src = `${host}${manifest.files['main.js']}`
        script.onload = () => {
          renderMicroFrontend()
        }
        document.head.appendChild(script)
      })

    return () => {
      // @ts-ignore
      window[`unmount${name}`] && window[`unmount${name}`](`${name}-container`)
    }
  })

  return (
    <main id={`${name}-container`} style={{ height: '100%' }} />
  )
}

MicroFrontend.defaultProps = {
  document,window
}

export default MicroFrontend

我正在尝试以动态方式呈现子组件的路由，但是，当我这样做时，我有一个非常奇怪的效果：Bug。

产生这种效果的代码片段是这样的（省略导入）：

const App = () => {
  const dispatch = useAppdispatch()
  const { loadWithSuccess } = useSelector(moduleSelectors)
  const avaibleModuleLinks = useSelector(avaibleModuleLinksWhitoutHome)

  useEffect(() => {
    dispatch(fetchAvaibleModules()).then(response =>
      dispatch(fetchAvaibleModuleLinks(response.payload as string[]))
    )
  },[dispatch])

  return (
    <browserRouter>
      <Template>
        <Switch>
          <Route exact={true} path="/" component={Home} />
          {loadWithSuccess ? avaibleModuleLinks?.map(
            (subMenuPath: SubMenuPath | undefined,index: number) => {
              const subMenuPathKey = subMenuPath ? subMenuPath.key : ''
              let micro = () => (
                <MicroFrontend
                  module={subMenuPathKey}
                  host="127.0.0.1"
                  name={subMenuPath ? subMenuPath.key.charat(0).toupperCase() : ''}
                />
              )
              return (
                <Route
                  key={index}
                  path={`/dfe/view/${subMenuPathKey}`}
                  component={micro}
                />
              )
            }
          ): <></>}
        </Switch>
      </Template>
    </browserRouter>
  )
}

export default App

只有当我不动态渲染路由时，才能达到预期的效果：desired behavior

产生这种效果的代码片段是这样的（省略导入）：

const ModuleNfe = () => (
  <MicroFrontend host="127.0.0.1" name="Nfe" module="nfe" />
)

const App = () => {
  const dispatch = useAppdispatch()
  const { loadWithSuccess } = useSelector(moduleSelectors)
  const avaibleModuleLinks = useSelector(avaibleModuleLinksWhitoutHome)

  useEffect(() => {
    dispatch(fetchAvaibleModules()).then(response =>
      dispatch(fetchAvaibleModuleLinks(response.payload as string[]))
    )
  },[dispatch])

  return (
    <browserRouter>
      <Template>
        <Switch>
          <Route exact={true} path="/" component={Home} />
          <Route path="/dfe/view/nfe" component={ModuleNfe} />
        </Switch>
      </Template>
    </browserRouter>
  )
}

export default App

您可能已经注意到，所需的行为是让我的页面在 Template 组件内呈现。但由于某种原因，情况并非如此。