reactjs - subir - registro de datos en firebase
Problemas con rutas profundas en una aplicación de una sola página en el alojamiento de Firebase (1)
(Actualizado a continuación con un poco más de información)
Tenemos una aplicación web de una sola página basada en reacciones que vive en Firebase Hosting. Hasta ahora, hemos utilizado el enrutamiento basado en hash (por ejemplo, mysite.com/#/path/to/content ). Presentamos React Router, que nos permite tener URLs más bonitas (por ejemplo, mysite.com/path/to/content ), pero ahora la aplicación no se carga cuando navegamos directamente a una ruta profunda. Detalles abajo:
El uso de React Router requería el uso de la reescritura de URL en Firebase Hosting. Las instrucciones son bastante sencillas, parece que todo lo que necesita hacer es esto:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
... dentro del archivo firebase.json . De hecho, nuestro archivo firebase.json completo es el siguiente:
{
"firebase": "",
"public": "dist",
"rules": "rules.json",
"ignore": [
"firebase.json",
"**/.*",
"**/*.map",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
No hay nada demasiado complicado allí (estamos firebase deploy -f en nuestro script de compilación, si se está preguntando por qué el argumento de firebase está vacío). El archivo rules.json vinculado es aún más simple:
{
"rules":{
".write":"true",
".read":"true"
}
}
Cuando cargo la aplicación yendo a la URL base y empiezo a navegar, todo está bien. Si voy directamente a una ruta en un nivel profundo (por ejemplo, mysite.com/path ), eso también funciona.
SIN EMBARGO
Si voy directamente a una ruta en un nivel profundo, o incluso a una ruta de nivel superior con una barra inclinada (por ejemplo, mysite.com/path/ o mysite.com/path/to/content ), entonces la aplicación no carga.
Específicamente, lo que sucede es que la página index.html carga y luego el navegador va a cargar nuestro archivo bundle.js creado en el paquete web al que se hace referencia en index.html , pero lo que devuelve Firebase Hosting para ese archivo JS es el contenido del índice. archivo html Entonces, de manera predecible, lo que vemos en la consola del navegador es este error:
Uncaught SyntaxError: Unexpected token <
... en la línea 1 del "archivo de paquete". Si veo el contenido del archivo del paquete en las herramientas de desarrollo de Chrome, la línea 1 del archivo del paquete es literalmente esta:
<!doctype html>
... que luego es seguido por el resto del HTML del archivo index.html .
Parece que lo que está sucediendo es que la regla de reescritura de la URL de Firebase dice "oh, estás tratando de hacer referencia a un archivo JS: veo que se supone que debo devolver el contenido de index.html para todo, así que aquí tienes" . Pero ese no puede ser el caso todo el tiempo, o el sitio nunca funcionará bajo ninguna circunstancia. Entonces, ¿por qué funciona si comienzo en la raíz del sitio, pero se rompe si pego una URL profunda a la aplicación? No tengo idea.
Si es útil, así es como mi archivo index.html referencia al archivo del paquete:
<script src="bundle.ce843ef7a2ae68e9e319.js"></script></body>
Parece que hay un problema con el alojamiento de Firebase, pero también pude ver que tal vez no entiendo Reaccionar Router en algún nivel, así que de alguna manera he arruinado las cosas con el código del lado del cliente de tal manera que está forzando el servidor para devolver la cosa incorrecta.
Aquí estoy yo esperando que sea una configuración estúpida que nos falta. ¡Cualquier ayuda es apreciada!
¡Gracias!
ACTUALIZACIÓN: Deshice nuestra aplicación para que solo devuelva "hola, mundo", que pasa por alto todas las cosas basadas en React, incluido React Router, y el problema persiste, por lo que ya no creo que esto tenga nada que ver con React- Router, aunque supongo que todavía hay una pequeña posibilidad de que esto tenga algo que ver con React.
Recibí noticias de Firebase Hosting. Aparentemente, el archivo bundle.js al que se hace referencia en nuestro archivo de índice necesitaba una barra delante, para que sea una ruta absoluta. Así que esto:
<script src="/bundle.js"></script>
...en lugar de esto:
<script src="bundle.js"></script>
En caso de que alguien más haga este mismo error tonto, espero que esto sea útil.