Я создал два отдельных пакета, один для моего сервера и один для моего клиента.Однако клиентский пакет все еще не загружается браузером, когда кто-то получает доступ к корневому маршруту.
Я сказал Express, чтобы рассматривать папку public/ как общедоступный общедоступный каталог здесь, внутри index.js:
app.use(express.static('public'));
app.get('/', (req, res) => {
const content = renderToString(<Home />);
Я также добавил фрагмент HTML со строкой шаблона ES6, например, так:
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import Home from './client/components/Home';
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
const content = renderToString(<Home />);
const html = `<html><head><body><div>${content}</div><script src="bundle.js"></script></body></head></html>`;
res.send(content);
});
Идея состоит в том, что когда пользователь получает ответ от этой конечной точки, он видит содержимое из <Home />, но также просим браузер пользователей вернуться на мой сервер и загрузить файл bundle.js.
Ожидается, что я обновлю страницу и сразу же получу localhost и сделаю запрос на bundle.jsфайл и увидеть журнал консоли, который я добавил в компоненте Home.js:
import React from 'react';
const Home = () => {
return (
<div>
<div>I am an OK home component</div>
<button onClick={() => console.log('Howdy!')}>Press me!</button>
</div>
);
};
export default Home;
Я обновил браузер и не увидел ни журнала консоли, ни файла bundle.js на вкладке Сеть.
Что здесь дает?