如何在使用Ract作为前端的情况下从express渲染HTML文件



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

我制作了一个在前端运行React的express服务器。我通过使用webpack和bundle解析我的react应用程序来运行这两个程序(react和express服务器(,然后使用公共目录用express static加载输出文件。

这就是我在根路径('/'(中呈现html文档的方法。当我尝试将react路由器与express路由器一起使用时,问题就开始了。我一直在寻求解决这个问题,我发现我只需要设置一条看起来像这样的快速路线:

/*This is my actual code in the project*/
router.get('/*', (req, res, next) =>{
res.sendFile(require('../public/index.html'))
})

这段代码将运行react,因为我从html中的脚本标记调用它,react将处理url并呈现它自己的组件。

但当我试图访问浏览器上的任何路径时,我都会遇到有史以来最简单的错误,SyntaxError:

C:UsersMatthewDesktopProyectosApid0srcpublicindex.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:UsersMatthewDesktopProyectosApid0srcroutesindex.js:5:18
at Layer.handle [as handle_request] 
(C:UsersMatthewDesktopProyectosApid0node_modulesexpresslibrouterlayer.js:95:5)
at next (C:UsersMatthewDesktopProyectosApid0node_modulesexpresslibrouterroute.js:137:13)

有人能帮我处理这个问题吗?

我修复了这个问题:

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

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

类似于:

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

相关内容

最新更新