how to use?
import { Suspense } from 'react'
import ReactDOMServer from 'react-dom/server'
import { ErrorBoundary } from 'react-error-boundary'
import { HelmetProvider } from 'react-helmet-async'
import { StaticRouter } from 'react-router-dom/server'
import router from '@/pages/router'
import serverRouter from './components/sync-hydrated-router/serverRouter'
import { ErrorFound } from './ErrorFound'
import App from './pages/app'
const render = serverRouter.hydrate((body: UrlBody, Provider) => {
const helmetContext: any = {}
//路由不存在不渲染
if (!Provider) return
const html = ReactDOMServer.renderToString(
<Provider>
<ErrorBoundary
fallbackRender={({ resetErrorBoundary, error }) => (
<Suspense>
<ErrorFound resetErrorBoundary={resetErrorBoundary} error={error} />
</Suspense>
)}>
<HelmetProvider context={helmetContext}>
<StaticRouter location={body.url}>
<App />
</StaticRouter>
</HelmetProvider>
</ErrorBoundary>
</Provider>
)
const { helmet } = helmetContext
const helmets: string[] = [helmet.title.toString(), helmet.meta.toString(), helmet.link.toString()]
const stateScript = Provider.inject(Provider.hydrateContext)
return { html, head: [...helmets].join(' '), foot: [stateScript].join(' ') }
})(() => ({ router, hydrateContext: {} }))
export { render }