javascript - 使用 React 作为前端时如何从 Express 渲染 HTML 文件?

标签 javascript get react-router render express-router

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

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

这就是我如何在根路径('/')处呈现 html 文档。 当我尝试将react-router与express router一起使用时,问题就开始了。我一直在寻求解决这个问题,我发现我只需要设置一条如下所示的快速路线:

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

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

此代码将运行 React,因为我从 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)

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

最佳答案

我用这个解决了问题:

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

关于javascript - 使用 React 作为前端时如何从 Express 渲染 HTML 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60843705/

相关文章:

javascript - 在 JavaScript 中注入(inject)今天的日期

php - 如何在 php 中清理从 url 到 mysql 的简单 _GET 输入

javascript - 如何在 ReactJS + REDUX 中进入索引路由之前重定向到登录页面

javascript - 如何将文件输入转换为base64 - React js

javascript - clearTimeout 不起作用 - 尝试了多种变体

jquery - 如何获取HTML标签内的所有内容?

C++通过ref返回成员的方法和get-set方法之间的区别

node.js - 当您为 React-Router 提供静态文件时,使用 Express JS 将数据发送到路由

reactjs - 点和连字符不允许 React Router URL 参数?

javascript - 如何解决 Jest Test Code mockRestore 不起作用的问题