Предупреждение: Ожидаемый сервер HTML будет содержать <div>в <div>(оболочка приложения) - PullRequest
Новая
       18

Предупреждение: Ожидаемый сервер HTML будет содержать <div>в <div>(оболочка приложения)

0 голосов
/ 17 февраля 2020

Ниже приведен пример кода, который поможет мне объяснить вопрос. 

// server.js
// Typical express app
import App from './App.jsx';
renderToString(<App />);

// App.jsx
import { Route, Switch } from 'react-router-dom';

// Component returns following:
<div>
<Switch>
    <Home /> // Home component returns <div>Home page</div>
    <Login /> // Login component returns <div>Log in page</div>
    <Profile /> // Profile component returns <div>Profile page</div>
<Switch>
</div>

// client.js
import App from './App.jsx';
hydrate(<App />, document.getElementById('root'));

Я использую веб-пакет в качестве упаковщика и планирую преобразовать приложение в PWA. У меня вопрос конкретно c к оболочке приложения. Допустим, я объявил /app-shell.html как маршрут оболочки моего приложения в рабочем окне. 

<Doctype html>
<html>
<head></head>
<body>
  <div id="root"></div>
</body>
<script src="vendor.js"></script>
<script src="client.js"></script>
</html>

Теперь веб-страница будет управляться через оболочку приложения. html. Допустим, пользователь напрямую посещает / авторизует маршрут, который будет обрабатываться через компонент Login. Контент внутри # root на этой странице будет «входить в систему» ​​после того, как клиент. js вступит в силу. Однако контент внутри # root, который теперь обрабатывается оболочкой приложения. html будет пустым, что сработает Warning: Expected server HTML to contain a matching <div> in <div>. Эта ошибка не является указанием маршрута входа c. Это будет происходить на каждой странице перезагрузки. Это то, что можно исправить? Благодаря.

...