reactjs - Problem när man dynamiskt registrerar rutter i en applikation med mikrofrontend-koncept

Jag har en Typescript + Redux (med RTK) applikation som använder konceptet microfrontends. Alla steg för konstruktionen kommer från denna handledning: Microfrontends tutorial.

Huvudkomponenten är Microfrontend.tsx (importer utelämnade):

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

Jag försöker rendera rutterna för barnkomponenterna på ett dynamiskt sätt, men när jag gör detta får jag en mycket konstig effekt: Bugg.

Kodsnutten som genererar denna effekt är denna (importer utelämnade):

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

Endast när jag inte renderar rutter dynamiskt får jag önskad effekt: önskat beteende

Kodsnutten som genererar denna effekt är denna (importer utelämnade):

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

Som du kanske har märkt är det önskade beteendet att min sida ska renderas inuti Template-komponenten. Men av någon anledning är det inte fallet.