Fetch API,给我index.html,但没有给我react JS中UI的dom结构

问题描述 投票:0回答:1

我在reactjs上构建了一个应用程序并在内部托管,当我执行fetch API或xhr时,我只获得公共文件夹中的index.html,并且它以id = root结尾。然而,它没有给我源文件的 app.js 中可用的 html,其中包含我的实际 UI html。可能是什么错误? REACT JS 新手。

我尝试做一个

fetch(url)

.then (r=>r.text())

    .then(r=>console.log(r))

    .catch(console.error)

这是我的index.js

const root =     ReactDOM.createRoot(document.getElementById('root'));
root.render( <React.StrictMode> <App /> </React.StrictMode> );

我将其作为输出

\<!DOCTYPE html\>\<html.   lang="en"\>\<head\>\<meta charset="utf-8"\>\<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"\>\<meta name="theme-color" content="#000000"\>\<meta name="referrer" content="no-referrer-when-downgrade"\>\<link rel="manifest" crossorigin="use-credentials" href="/tindntest/manifest.json"\>\<link rel="shortcut icon" href="/tindntest/favicon.ico"\>\<title\>React App\</title\>\<script src="/navigation/harmony-navbar.js"\>\</script\>\<script defer="defer" src="/tindntest/static/js/main.9ec7069e.js"\>\</script\>\<link href="/tindntest/static/css/main.7b41a95a.css" rel="stylesheet"\>\</head\>\<body\>\<noscript\>You need to enable JavaScript to run this app.\</noscript\>\<nav id="harmony-navbar"\>\</nav\>\<div id="harmonyBanners"\>\</div\>\<div id="root"\>\</div\>\</body\>\</html\>

我期望的 DOM 位于 id= root 下。我如何得到这个?

javascript reactjs xmlhttprequest fetch-api react-dom
1个回答
0
投票

听起来你没有犯错。 React 在客户端(即浏览器中)呈现您的 UI,因此当您查看页面源代码时您不会看到 UI。如果您在浏览器中检查渲染的文档,您将看到实际的 UI。

如果你想在服务器上渲染 React,请查看 https://react.dev/reference/react-dom/server

© www.soinside.com 2019 - 2024. All rights reserved.