如何在使用 Ract 作为前端时从 express 渲染 HTML 文件？

Question

我是 Web 开发领域的新手，我遇到了一个看似愚蠢但花了我很多时间的问题。

我做了一个快速服务器，运行在前端使用 React。我运行通过使用 webpack 和 bundle 解析我的 React 应用程序（React 和 Express 服务器），然后我使用 public 目录加载带有 Express 静态的输出文件。

这就是我如何在根路径 ('/') 处呈现 html 文档。当我尝试将 react-router 与 express router 一起使用时，问题就开始了。我一直在寻找解决这个问题的方法，我发现我只需要设置一条看起来像这样的快速路线：

/*This is my actual code in the project*/

router.get('/*', (req, res, next) =>{
res.sendFile(require('../public/index.html'))
})

此代码将运行做出反应，因为我从 html 内的脚本标记调用它，React 将处理 url 并呈现它自己的组件。

但是当我尝试访问浏览器上的任何路径时，我遇到了有史以来最简单的错误，SynthaxError:

C:\Users\Matthew\Desktop\Proyectos\Apid0\src\public\index.html:1
<!DOCTYPE html>
^

SyntaxError: Unexpected token '<'
at wrapSafe (internal/modules/cjs/loader.js:1067:16)
at Module._compile (internal/modules/cjs/loader.js:1115:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1040:19)
at require (internal/modules/cjs/helpers.js:72:18)
at C:\Users\Matthew\Desktop\Proyectos\Apid0\src\routes\index.js:5:18
at Layer.handle [as handle_request] 
(C:\Users\Matthew\Desktop\Proyectos\Apid0\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Matthew\Desktop\Proyectos\Apid0\node_modules\express\lib\router\route.js:137:13)

有人可以帮我解决这个问题吗？

Answer 1

首先，您应该将文件内容作为字符串读取（不需要）。

类似于：

router.get('/*', (req, res, next) =>{
  fs.readFile("../public/index.html", "utf8", function(err, data) {
    if (err) throw err;
    res.sendFile(data)
  })
})

Answer 2

我解决了这个问题：

router.get('/*', (req, res, next) =>{
res.sendFile('index.html', { root: path.join(__dirname, '../public') });
})

如何在使用 Ract 作为前端时从 express 渲染 HTML 文件？

How to render HTML file from express while using Ract as front end?

javascript

get

react-router

render

express-router