it-roy-ru.com

Почему в React рабочей сборке Webpack отображается пустая страница?

Я создаю приложение реагирования, и в данный момент webpack-dev-server работает просто отлично (отображается текст hello world ), но webpack -p показывает пустую страницу , Для производственной сборки На вкладке "Сеть" в разделе chrome dev tools показаны index.html и index_bundle.js размером 0 B (см. Рисунок) enter image description here Но это явно не тот случай, когда размер файла HTML равен 227 B & index_bundle.js, размер файла 195Kb (см. Рисунок)

Также Chrome На вкладке Devtools Elements показано следующее (см. Рисунок) enter image description here

Мой конфигурационный файл веб-пакета выглядит так: enter image description here

19
jasan

Я понял это, я использовал browserHistory без настройки локального сервера. Если я изменил его на hashHistory, это сработало. Для локального тестирования производства веб-пакетов с историей браузера реакции-маршрутизатора мне нужно было сделать это. Настроить сервер:

Ваш сервер должен быть готов обрабатывать реальные URL. Когда приложение в первый раз загружается в /, оно, вероятно, будет работать, но когда пользователь перемещается и затем нажимает кнопку обновить в/account/23, ваш веб-сервер получит запрос к/account/23. Он понадобится вам для обработки этого URL и включения вашего JavaScript-приложения в ответ.

Экспресс-приложение может выглядеть так:

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)

И на всякий случай, если кто-то развертывает на firebase, используя реагирующий маршрутизатор с историей браузера, сделайте это:

{
  "firebase": "<YOUR-FIREBASE-APP>",
  "public": "<YOUR-PUBLIC-DIRECTORY>",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}
22
jasan

использование 

import { HashRouter } from 'react-router-dom';

вместо

import { BrowserRouter} from 'react-router-dom';

и не забудьте заменить его в вашем коде маршрутов 

<HashRouter>
  ...
</HashRouter>
3
Yecodeo

GitHub Pages не поддерживает маршрутизаторы, использующие API истории HTML5 pushState (например, React Router с использованием browserHistory). Это связано с тем, что при загрузке новой страницы для URL-адреса, такого как http://user.github.io/todomvc/todos/42, где /todos/42 - это интерфейс внешнего интерфейса, сервер страниц GitHub возвращает 404, поскольку он ничего не знает о /todos/42. Если вы хотите добавить маршрутизатор в проект, размещенный на страницах GitHub, вот несколько решений:

  • Вы можете перейти от использования API истории HTML5 к маршрутизации с хэшами. Если вы используете React Router, вы можете переключиться на hashHistory для этого эффекта, но URL будет длиннее и более подробным (например, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Подробнее о различных реализациях истории в React Router.
  • В качестве альтернативы, вы можете использовать трюк, чтобы научить страницы GitHub обрабатывать 404, перенаправляя на страницу index.html со специальным параметром перенаправления. Вам потребуется добавить файл 404.html с кодом перенаправления в папку build перед развертыванием проекта, и вам потребуется добавить код, обрабатывающий параметр перенаправления, в index.html. Вы можете найти подробное объяснение этой техники в этом руководстве .
1
s4ndhyac