¿Por qué la compilación de producción de React Webpack muestra una página en blanco?

Nuestros desarrolladores estrellas han agotado sus depósitos de café, en su búsqueda diariamente por la resolución, hasta que Ricardo halló la solución en GitHub así que en este momento la compartimos con nosotros.

Solución:

Lo descubrí, estaba usando browserHistory sin configurar un servidor local. Si lo cambié a hashHistory, funcionó. Para probar la producción del paquete web localmente con el historial del navegador del enrutador de reacción, necesitaba hacer esto Configurar un servidor:

Su servidor debe estar listo para manejar URL reales. Cuando la aplicación se carga por primera vez en /, probablemente funcionará, pero a medida que el usuario navega y luego presiona actualizar en /cuentas/23, su servidor web recibirá una solicitud para /cuentas/23. Lo necesitará para manejar esa URL e incluir su aplicación de JavaScript en la respuesta.

Una aplicación express podría verse así:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response)
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
)

app.listen(port)
console.log("server started on port " + port)

Y en caso de que alguien se esté implementando en Firebase usando el enrutador de reacción con el historial del navegador, haga esto:

  "firebase": "",
  "public": "",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    
      "source": "**",
      "destination": "/index.html"
    
  ]

usar

import  HashRouter  from 'react-router-dom';

en vez de

import  BrowserRouter from 'react-router-dom';

y no olvides reemplazarlo en tu código de rutas

  ...

GitHub Pages no es compatible con enrutadores que usan HTML5 pushState API de historial bajo el capó (por ejemplo, React Router usando browserHistory). Esto se debe a que cuando se carga una página nueva para una URL como http://user.github.io/todomvc/todos/42, donde /todos/42 es una ruta de interfaz, el servidor de Páginas de GitHub devuelve 404 porque no sabe nada de /todos/42. Si desea agregar un enrutador a un proyecto alojado en Páginas de GitHub, aquí hay un par de soluciones:

• Puede cambiar de usar la API de historial de HTML5 a enrutar con hashes. Si usa React Router, puede cambiar a hashHistory para este efecto, pero la URL será más larga y detallada (por ejemplo, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Lea más sobre las diferentes implementaciones de historial en React Router.
• Alternativamente, puede usar un truco para enseñar a las Páginas de GitHub a manejar 404 redirigiendo a su index.html página con un parámetro de redirección especial. Tendrías que agregar un 404.html archivo con el código de redirección al build carpeta antes de implementar su proyecto, y deberá agregar el código que maneja el parámetro de redirección para index.html. Puedes encontrar una explicación detallada de esta técnica en esta guía.

Si te mola el proyecto, eres capaz de dejar un artículo acerca de qué le añadirías a este tutorial.

---

---

Utiliza Nuestro Buscador