Reaccionar enrutamiento en wordpress

4 minutos de lectura

Estoy construyendo un SPA de reacción con WordPress ejecutándose como backend, pero es no sin cabeza, por lo que toda la interfaz está incluida en el tema. Simplemente ejecuto npm build y pongo en cola los archivos de producción en el archivo functions.php. La aplicación se convierte en un <div id="root"></div> dentro de un archivo de plantilla. Mi instalación de wordpress está configurada para tener una página de inicio estática, que usa la plantilla que contiene el div raíz de React.

Esto parece funcionar bien, aparte del enrutador. Si voy a una dirección diferente, diga https://mywebsite/aboutintenta cargar una página de wordpress llamada about, en lugar de permanecer en la misma página y usar el enrutador para representar el componente apropiado. ¿Hay alguna configuración que deba cambiar en el archivo .htaccess? ¿O hay algo más que me estoy perdiendo?

  • ¿Funcionan bien los enlaces normales en su SPA? ¿Es solo el acceso directo a las URL lo que da como resultado 404?

    – Ian Lobser

    21 de marzo de 2019 a las 22:44

  • Debería haber mencionado eso. Los enlaces funcionan bien (cambia la URL y muestra el componente correcto). Solo se rompe cuando ingreso una URL manualmente.

    – Rob Teeuwen

    21 de marzo de 2019 a las 22:51

  • Todavía no tiene cabeza si está usando reaccionar solo para el tema y extrayendo datos de WP Api. Headless no implica que no puedas usarlo como tema de WP.

    – Vlatko Vlahek

    22 de marzo de 2019 a las 0:47

  • Hasta donde yo sé, un sitio web sin cabeza es aquel en el que el backend y el frontend son completamente independientes. En este caso, el frontend está incrustado dentro del backend, no es independiente. Algunos de los datos mostrados se extraen de la API REST, pero php procesa algunos en la carga de la primera página.

    – Rob Teeuwen

    22 de marzo de 2019 a las 9:52

Si tiene una aplicación React en su página de WP y no desea editar .htaccess, también puede agregar reglas de reescritura con añadir_reescribir_regla() en functions.php para redirigir todas las solicitudes a la página WP de su aplicación de reacción para que sean manejadas por React Router.

add_action('init', 'wp55290310_rewrite_rules');

function wp55290310_rewrite_rules() {
    add_rewrite_rule('^your-react-app-root/(.+)?', 'index.php?pagename=your-react-page-name', 'top');
}

Debe especificar el nombre base en React Router:

<BrowserRouter basename="/your-react-app-root">
  <Switch>
      <Route exact path="https://stackoverflow.com/" component={SomeComponent} />
      <Route exact path="/other-page" component={OtherComponent} />
  </Switch>
</BrowserRouter>

  • Además, se necesita una descarga de enlaces permanentes de WordPress. Simplemente ingrese a Configuración >> Enlaces permanentes y guarde los cambios. Vaciará su “caché de enlaces permanentes”.

    – NaN140114

    30 de mayo de 2019 a las 18:43


  • los add_rewrite_rule funciona, gracias. No necesitaba establecer un basenamesolo funciona con React Router 5.1.2

    – Darren Cooney

    27 de febrero de 2020 a las 18:35

  • ¿Qué debo incluir para ‘your-react-page-name’?

    – CrazyDroid

    9 de junio de 2020 a las 5:32

  • @CraZyDroiD ‘your-react-page-name’ debe ser el slug de la página a la que se está redirigiendo (por ejemplo, yoursite.com/testpage/ -> testpage).

    – Mikko Koskela

    5 de agosto de 2020 a las 6:08

Sí, la respuesta se encuentra dentro del archivo .htaccess.

Debe configurar una regla general, que servirá índice.php archivo para todas las rutas en lugar de intentar encontrar un archivo php coincidente para la ruta que está sucediendo ahora.

Debería poder usar esta configuración para lograr tal comportamiento:

# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

La solución implica que está utilizando modrewrite en su servidor.

  • Esto funcionó, pero descubrí que, además, necesitaba desactivar los enlaces permanentes (a través del tablero -> configuración -> enlaces permanentes -> establecer en ‘simple’). Antes de esto, cuando todo el tráfico se enrutaba a index.php, el enrutador de wordpress captaba este tráfico antes que el enrutador de reacción.

    – Rob Teeuwen

    22 de marzo de 2019 a las 9:59

  • Extraño, estoy usando enlaces permanentes personalizados de nombre de publicación o estructura personalizada con esta configuración sin problemas

    – Vlatko Vlahek

    22 de marzo de 2019 a las 10:52

  • Con este enfoque, recibo un error 404 en la consola (aunque reaccione bien con las rutas). ¿Hay alguna manera de hacer que la respuesta de wordpress sea 200 en lugar de 404?

    –Santiago Mendoza Ramírez

    16 de julio de 2021 a las 14:49

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad