Next.js app router

This site uses the host below. Press the button. The page changes while the dialog is open, and the dialog closes with it.

'use client'
import { usePathname } from 'next/navigation'
import { DialogHost } from 'react-confirm-alert'

export function Dialogs() {
  return <DialogHost dismissKey={usePathname()} />
}

Render it once in the root layout, a server component:

import 'react-confirm-alert/style.css'
import { Dialogs } from './dialogs'

export default function RootLayout({ children }: LayoutProps<'/'>) {
  return (
    <html lang="en">
      <body>
        {children}
        <Dialogs />
      </body>
    </html>
  )
}

The package starts with 'use client', so server components can import it. Call confirm() from client code. On the server it rejects.