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

问题描述

我有一个使用微前端概念的 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 组件内呈现。但由于某种原因，情况并非如此。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）