You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React应用中样式表拼写错误的报错位置排查

服务端渲染页面样式异常的报错位置疑问

我正在学习《Pro MERN Stack(第二版)》一书,已完成第12章的服务器路由部分内容。测试服务端渲染的About页面时,发现其样式与浏览器渲染页面不一致。Express将localhost:8000/about路由至render()函数,相关代码如下:

function render(req, res) {
  // const body = ReactDOMServer.renderToString(<About />);
  const element = (
    <StaticRouter location={req.url} context={{}}>
      <Page />
    </StaticRouter>
  );
  const body = ReactDOMServer.renderToString(element);
  res.send(template(body));
}

template函数代码如下:

export default function template(body) {
  return `<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Pro MERN Title</title>

    <link rel="stylesheet" href="/boostrap/css/bootstrap.min.css" ></link>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

    <style>...</style>
  </head>

  <body>
    <!-- Page generated from template. -->
    <div id="contents">${body}</div>

    <script src="/env.js"></script>
    <script src="/vendor.bundle.js"></script>
    <script src="/app.bundle.js"></script>
  </body>
</html>
`;
}

经排查,错误在于href="/boostrap/css/bootstrap.min.css"中bootstrap漏写了一个字母't'。我已修正该拼写错误,应用恢复正常,现需了解该拼写错误的报错应出现在何处?


内容的提问来源于stack exchange,提问作者chris-j

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 04:05:52