解决React Suspense自定loading 页面切换闪烁

最终的解决方案是封装一个组件，在引用的时候组件用封装组件包裹！

const lazyComponent = (element) => {
  return (
    <Suspense fallback={<div>loading…</div>}>
       // AutoScrollToTop 是回到顶部组件
      {/* <AutoScrollToTop> */}
      { element }
      {/* </AutoScrollToTop> */}
    </Suspense>
  )
}

使用方法

const route = [
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/layout',
    element: lazyComponent(<Layout />),
    children: [
      {
        path: '/layout/home',
        element: lazyComponent(<Home />)
      },
    ]
  },
  {
    path: '*',
    element: <Navigate to="/login" />
  }
]
export default route

封装AutoScrollToTop组件

import { useLayoutEffect } from 'react'
import { useLocation } from 'react-router'

const AutoScrollToTop = ({ children }: any) => {
    const location = useLocation()
    
    useLayoutEffect(() => {
        if(location.pathname === '/') return
        document.documentElement.scrollTo(0, 0)
    }, [location.pathname])
    return children
}

export default AutoScrollToTop