微前端架构下TypeScript+Redux(RTK)应用动态注册路由渲染异常问题

Hey there! Let's figure out why your dynamically registered microfrontend routes aren't rendering inside the Template component, while static routes work perfectly. I've gone through your code and spotted a few key issues that could be causing this behavior:

1. Missing Dependencies in MicroFrontend's useEffect #

Looking at your MicroFrontend component, the useEffect hook doesn't have a dependency array. This means the effect will run every time the component re-renders, which can lead to unexpected unmount/mount cycles—especially when dealing with dynamic routes. When your app switches between dynamic routes, the effect might execute at the wrong time, preventing the microfrontend from rendering correctly.

Fix:
Add all relevant variables to the dependency array so the effect only runs when these values change:

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`)
  }
}, [name, host, module, history]) // Add dependencies here

2. Dynamic Component Creation with component Prop #

When you dynamically create a component using () => <MicroFrontend ... /> and pass it to the Route's component prop, you're creating a new component function on every render. React treats this as a completely new component each time, which can cause unnecessary re-mounts or prevent proper routing context from being passed.

Fix: Use the render prop instead of component for dynamic route rendering. The render prop accepts a function that returns the JSX, and it doesn't create a new component instance on each render:

{loadWithSuccess ? avaibleModuleLinks?.map( (subMenuPath: SubMenuPath | undefined) => {
  if (!subMenuPath) return null; // Guard clause to avoid undefined issues
  const subMenuPathKey = subMenuPath.key;
  return (
    <Route 
      key={subMenuPathKey} // Use the unique key instead of index for better performance
      path={`/dfe/view/${subMenuPathKey}`} 
      render={() => (
        <MicroFrontend 
          module={subMenuPathKey} 
          host="127.0.0.1" 
          name={subMenuPath.key.charAt(0).toUpperCase()} 
        />
      )} 
    />
  )
}) : null}

Note: I added a guard clause to skip undefined subMenuPath entries and used subMenuPathKey as the route key (instead of index) to ensure React can correctly track and reuse components.

3. Unnecessary defaultProps for Global Objects #

Your MicroFrontend component has defaultProps for document and window, but these are global browser objects that don't need to be passed as props. Removing this can avoid any potential confusion or unexpected behavior:

// Remove this line
// MicroFrontend.defaultProps = { document, window }

Additional Checks #

• Verify that avaibleModuleLinks is correctly populated with valid subMenuPath objects (with non-empty key values) when loadWithSuccess is true. You can add a console.log to confirm this data is as expected.
• Ensure that the microfrontend's render{Name} function is properly exposed on the window object and that the script loads successfully (check the browser's network tab for the asset-manifest.json and main.js requests).

After applying these fixes, your dynamic routes should render the microfrontend components inside the Template component just like the static route does.

内容的提问来源于stack exchange，提问作者Gabriel Naressi de Fabris