Hola amigo dev, hoy vamos a aprender a llevar nuestra App de React a producción con el hosting gratuito de Firebase y que funcione React Router. Es común que cuando recargas la página te muestra el error 404, pues en este post vamos a aprender como hacer que eso no pase.

Cuando asociamos nuestro proyecto a un proyecto de Firebase, eso que hacemos al escribir en la consola "firebase init", se crea el documento firebase.json.

 

En este archivo se encuentra la configuración que Firebase utilizara para el Hosting.

 

Si abrimos ese archivo podremos ver algo como esto:

 

El problema con esta configuración es que te has saltado un paso, la de reescribir las configuraciones del archivo index.html, o mejor dicho, no lo has mencionado a Firebase que utilizaras React Router y por eso al refrescar la página te sale un 404.

Si estás en este punto la solución es agregar el redireccionamiento, o mejor dicho, el rewrite. Esto se hace para que todas las solicitudes al "servidor" lleguen a la ruta index y no busque el archivo o la ruta que especificaste.

Esto se hace corrigiendo el firebase.json con la siguiente configuración:

Importante que solo te fijes en el rewrites, ya que tú puedes tener una carpeta distinta configurada como destino del build.

Puedes ver un archivo ya corregido aqui.