sync-hydrated-router

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 }