英文:
React part of HTML wont load onto webpage when using 'get' request in nodejs
问题
我正在学习Web开发，我正在使用Visual Studio Code。我使用命令"npx create-react-app my-app"创建了一个React应用程序。然后我进行了一些前端开发，并使用"npm start"命令运行了网站，一切正常。
在进行了一些前端开发之后，我决定为后端创建一个"server"文件夹。在这里，我尝试使用"app.get"将index.html文件加载到浏览器上，但是React部分没有加载到页面上。HTML文件被显示出来，但是应该显示在
文件目录如下：
public文件夹中的index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<title>Food Town</title>
<link rel="shortcut icon" type="image/png" href="\Images\favicon.jpg" />
<script
src="https://kit.fontawesome.com/73800f79be.js"
crossorigin="anonymous"
></script>
</head>
<body>
Hello!!!
<div id="root"></div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
server文件夹中的index.js文件：
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
const path=require("path");
const dotenv = require("dotenv").config();
const staticPath= path.join(__dirname, '../food-site');
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(staticPath));
app.get("/", (req,res)=>{
res.sendFile(path.join(__dirname , '../food-site/public/index.html'));
});
const PORT = process.env.PORT;
app.listen(PORT, () => {
console.log("Server connected on port: " + PORT);
});
起初，我遇到了必须使用绝对路径或相对路径的错误，HTML文件根本没有显示出来。我尝试在网上和YouTube上寻找可能的解决方案，并成功解决了这个问题。然而，React部分没有渲染到屏幕上，我找不到任何解决方案。
英文:
Im learning web development. Im using visual studio code
So I created a react app using "npx create-react-app my-app"
Then I did some frontend and ran the site using 'npm start' command, it was working fine
After working on some frotend, I decided to create a 'server' folder for the backend
Here i tried to load the index.html file onto the browser using 'app.get', however the react part dont not load onto the page. The html file gets displayed, but all the react stuff that should be coming into the
div id="root"
does not show up.
How do I fix this?
the file directories:
the index.html file inside the public folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<title>Food Town</title>
<link rel="shortcut icon" type="image/png" href="\Images\favicon.jpg" />
<script
src="https://kit.fontawesome.com/73800f79be.js"
crossorigin="anonymous"
></script>
</head>
<body>
Hello!!!
<div id="root"></div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
the index.js file inside the server folder:
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
const path=require("path");
const dotenv = require("dotenv").config();
const staticPath= path.join(__dirname, '../food-site');
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(staticPath));
app.get("/", (req,res)=>{
res.sendFile(path.join(__dirname , '../food-site/public/index.html'));
});
const PORT = process.env.PORT;
app.listen(PORT, () => {
console.log("Server connected on port: " + PORT);
});
At first I was getting the error that I had to use absolute path or relative path, the html file wasnt displaying at all.
I tried looking online and on youtube for possible solutions and was able to resolve that issue.
However, the react portion wasnt rendering onto the screen and i wasnt able to find any solution for it.
答案1
得分: 0
你没有任何代码会查看 #root。所有的脚本都是与 React 无关的库。
看起来你把原始源代码放到了你的 Web 服务器上，而不是运行构建脚本（可能使用 webpack）并部署输出。
英文:
There's no code which would look anything into #root there. All the scripts are for libraries that have nothing to do with React.
It looks like you have dropped your raw source code into your web server instead of running your build script (which probably uses webpack) and deploying the output from it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年8月8日 23:58:23
- 转载请务必保留本文链接：https://go.coder-hub.com/76861283.html
- node.js
- web-development-server
评论