Estoy creando un sitio "Single page app" con Page.js. Todo va bien pero al refrescar una ruta específica o escribirla directamente en el navegador ejemplo: localhost8080/about
, el contenido desaparece. ¿Existe alguna manera de resolver este conflicto?
Aquí hay un ejemplo en el repositorio de Page.js que tiene el mismo problema. Lo he probado utilizando el módulo http-server para crear mi servidor local.
-
2Bienvenido a StackOverflow en español. ¿Puedes colocar el código o alguna configuración que utilices para replicar tu problema?– user227el 8 feb. 2016 a las 22:47
-
@LuiggiMendoza, agregué un ejemplo sencillo para que se entienda mejor, básicamente estoy haciendo lo mismo pero utilizando varios módulos.– agujexel 8 feb. 2016 a las 23:56
-
Si el ejemplo del repositorio tiene un problema y no funciona, una buena opción es que abras un Issue en el repositorio. Puede, por ejemplo, estar desactualizado.– rnrneverdiesel 9 feb. 2016 a las 4:31
2 respuestas
El ejemplo está bien. No es un fallo de page.js, sino el comportamiento normal y esperado.
Cuando vas a la página principal (en la que se incluye page.js), se carga el código de page.js y se crean las diferentes rutas (que asocian las diferentes URLs con la función a ejecutar en cada caso). Ahora, cuando pulsas en alguno de los enlaces, o incluso si pulsas en los botones del historial, page.js intercepta esa solicitud y la procesa sin necesidad de que se mande al servidor, mostrando el contenido adecuado.
Pero si recargas la página, page.js ya no está en control (no se ha cargado) y por lo tanto no intercepta la solicitud que esta vez sí se realiza al servidor, donde la página no se encuentra, lo que hace que el servidor devuelva un error 404 (página no encontrada).
El problema es que con el ejemplo de page.js sólo se están controlando el enrutamiento (routing) desde el lado del cliente, entonces cuando se recarga y es el servidor el que está en control, no sabe cómo hacerlo y falla. Una solución sería configurar el servidor para redirigir esas solicitudes a la página principal (p.e. en Apache usando .htaccess
), donde page.js sí se cargará y será capaz de procesarlas correctamente.
Disclaimer: Esta no es la mejor solución, ya que es solo un hack y solo se muestra debido a que es rapido de usar.
Otra opción es deshabilitar el refrescado de la pagina desde Javascript
Este codigo usa jQuery
function disableF5(e) { if ((e.which || e.keyCode) == 116) e.preventDefault(); };
$(document).on("keydown", disableF5);
Codigo obtenido de Disable F5 and browser refresh using javascript