Configurar Apache para que redirija las rutas virtuales de React

Buenos días, hoy os escribo por un problema que he tenido donde trabajo y como lo hemos solucionado.

Cuando utilizamos rutas virtuales en React con react-router-dom, funciona todo perfectamente en local cuando haces las pruebas, incluso si indicas la ruta manualmente y la actualizas.

El problema viene cuando creamos el build de la aplicación de React y la metemos en un servidor Apache. Aparentemente, funciona todo correctamente, pero cuando actualizamos la ruta desde el navegador o manualmente, nos sale un error 500 a no ser que estemos en la ruta principal del index.html.

En mi XAMP local (windows 10) solo con incorporar el .htaccess que indico más abajo, me ha funcionado, pero en este caso, el servidor que utilizamos en la empresa es con sistema operativo Debian por lo que la solución en otros sistemas linux, supongo, que tendrán una solución similar.

Como solucionar el problema

Lo primero de todo es entrar al servidor con las credenciales correspondientes. Yo utilizo la terminal de Putty para estos casos.

Una vez dentro, con usuario root tendremos que habilitar el modulo de Apache rewrite :

# a2enmod rewrite

Después tendremos que modificar el archivo de 000-default.conf que está en la ruta /etc/apache2/sites-enabled/ de la siguiente forma

$ nano /etc/apache2/sites-enabled/000-default.conf

Con este comando se abrira la aplicación de texto nano para poder modificar el archivo donde tendremos que poner lo siguiente:

<VirtualHost *:80>

………
………

<Directory /var/www/html>

Options Indexes FollowSymLinks
AllowOverride All
Require all granted

</Directory>

……….
……….
</VirtualHost>

Antes de terminar, tendremos que realizar un archivo .htaccess con la siguiente configuración y ponerla en la raiz de la aplicación:

  RewriteEngine On  
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  RewriteRule ^ /index.html [L]

Por ultimo, necesitaremos reiniciar Apache para que coja todos los cambios, de cualquiera de las siguientes formas:

# systemctl restart apache2

o

# /etc/init.d/apache2 restart

En resumen

Trabajar con React y react-router-dom es muy fácil en muchos aspectos y sobre todo cuando trabajamos en local, pero ahí fuera hay más cosas que el local y necesitamos acoplarnos y aprender otras cosas para poder asociar nuestro código con servidores como Apache que es uno de los más famosos que existe.

Espero haberos ayudado y os dejo enlaces de donde he sacado dicha información:

Apache2. Activación de la reescritura de urls y reglas con mod rewrite

https://es.stackoverflow.com/questions/492065/problema-con-route-reactjs-al-subirlo-a-hosting