Question

我创建了两个单独的单独的包，一个用于我的服务器，一个用于我的客户端。但是，当有人访问根路由时，浏览器仍然无法下载客户端软件包。

我告诉Express将public/文件夹视为index.js内部的免费公共目录：

app.use(express.static('public'));
app.get('/', (req, res) => {
  const content = renderToString(<Home />);

我还添加了带有ES6模板字符串的HTML代码段，如下所示：

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文件。

这里有什么？

Answer 1

因此，我创建了变量html，并在其中存储了带有bundle.js文件的模板字符串中的HTML，但是后来我不在任何地方使用该变量。

我不得不将res.send(content);替换为res.send(html);。

快递服务器配置问题，公共目录

1 个答案: