Añade un agente de voz con IA a React Router

Cómo añadir AnveVoice a una aplicación de React Router

En el modo framework de React Router v7, añade el script de AnveVoice a la exportación Layout de app/root.tsx. En los modos declarativo o de datos, edita el index.html de Vite. El código de las rutas nunca necesita tocarlo. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Modo framework: Exportación Layout en app/root.tsx, después de Scripts
• Modo declarativo o de datos: index.html en la raíz del proyecto (Vite)
• Modo SPA (ssr: false): La ruta raíz se prerenderiza en index.html durante la compilación
• Programación necesaria: Un elemento script

Antes de empezar

Obtén tu ID de incrustación en app.anvevoice.app (plan Free, 0 US$, sin tarjeta). React Router v7 puede ejecutarse en tres modos, según su documentación: declarativo (BrowserRouter), de datos (createBrowserRouter con RouterProvider) y framework (un plugin de Vite con módulos de ruta, además de renderizado SPA, SSR y estático). Dónde va la etiqueta depende del modo que use tu proyecto. Abre el proyecto y busca app/root.tsx y un archivo react-router.config.ts. Si existen, estás en modo framework. Si tu punto de entrada es src/main.tsx y renderiza un router en un elemento con id root, estás en modo declarativo o de datos.

Modo framework: el Layout en root.tsx

La ruta raíz de React Router puede exportar un componente Layout opcional que renderiza la estructura del documento: html, head, body, Meta, Links, ScrollRestoration y Scripts. La documentación explica que existe para que esa estructura no se duplique entre el componente raíz, HydrateFallback y ErrorBoundary, y para que React no vuelva a montar los elementos de la estructura al cambiar entre ellos. Un script colocado en esta estructura está presente en todas las páginas, incluidas las de error. Coloca el elemento de AnveVoice al final del body, después de Scripts, para que el código de hidratación del propio framework tenga prioridad.

• 1. Abre app/root.tsx — Este es el módulo de ruta raíz del que hereda toda tu aplicación.
• 2. Añade el script a Layout — Renderiza un elemento script con el atributo async al final del body, como se muestra. Sustituye YOUR_EMBED_ID. // app/root.tsx import { Links, Meta, Outlet, Scripts, ScrollRestoration, } from "react-router"; export function Layout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <Meta /> <Links /> </head> <body> {children} <ScrollRestoration /> <Scripts /> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async /> </body> </html> ); } export default function App() { return <Outlet />; }
• 3. Reinicia el servidor de desarrollo — Ejecuta de nuevo tu comando de desarrollo y carga una página; el botón aparece abajo a la derecha.

React 19 y el script async

React 19 da un trato especial a los elementos script que tienen definidos src y async: React puede moverlos al head del documento y elimina los duplicados idénticos. Eso encaja con una etiqueta para todo el sitio, y AnveVoice además ignora una segunda copia en la misma página. La documentación de React indica que añadir las propiedades onLoad u onError desactiva ese trato especial, así que no las pongas en el elemento.

Modo SPA (ssr: false)

Si defines ssr como false en react-router.config.ts, la documentación del modo SPA de React Router indica que aun así renderiza la ruta raíz durante la compilación para producir index.html. Como Layout pertenece a la ruta raíz, la etiqueta de AnveVoice queda incluida en ese archivo. Eso también significa que el código de Layout se ejecuta en el servidor durante la compilación, así que no hagas referencia a window allí; un elemento script simple es seguro.

Modos declarativo y de datos: index.html

Estos modos montan un árbol de React solo en el cliente desde un index.html de Vite. En versiones antiguas de React, un elemento script creado por React en el cliente no se ejecuta; por eso no pongas la etiqueta dentro de un componente. Añádela a index.html, donde el navegador la carga directamente.

• 1. Abre index.html — Está en la raíz del proyecto de Vite y contiene el div raíz y el script de módulo de main.tsx.
• 2. Añade la etiqueta antes de la etiqueta de cierre body — Coloca el script de AnveVoice después del script de módulo. <!-- index.html (project root, Vite) --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body> </html>

Comprueba que funciona

• 1. Ejecuta una compilación de producción — Ejecuta react-router build (modo framework) o vite build, y después sirve el resultado.
• 2. Inspecciona el HTML — Ve el código fuente de una página y busca anvevoice.app/embed.js.
• 3. Prueba la voz — Haz clic en el botón redondo del micrófono, permite el acceso al micrófono y haz una pregunta. Navega a otra ruta y confirma que el botón sigue ahí.

Problemas comunes

• Falta la etiqueta en modo framework: la añadiste al componente por defecto en lugar de a la exportación Layout, así que las páginas de error no la incluyen, o editaste otro archivo raíz.
• La etiqueta no se ejecuta en modo declarativo: la renderizó un componente. Muévela a index.html.
• Botón duplicado: la etiqueta está tanto en root.tsx como en index.html. Conserva una.
• Micrófono bloqueado: sirve el sitio por HTTPS y evita una cabecera Permissions-Policy que desactive el micrófono.

Fuentes

• Documentación de React Router: root.tsx (exportación Layout) (https://reactrouter.com/api/framework-conventions/root.tsx) — consultado el 2026-10-14
• Documentación de React Router: modo SPA (https://reactrouter.com/how-to/spa) — consultado el 2026-10-14
• Documentación de React Router: elegir un modo (https://reactrouter.com/start/modes) — consultado el 2026-10-14
• Documentación de React: componente script (https://react.dev/reference/react-dom/components/script) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de React
• Cómo añadir AnveVoice a una aplicación Next.js
• Cómo añadir AnveVoice a un sitio alojado en Netlify
• Cómo añadir AnveVoice a una app de Vue

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.