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
相关产品推荐
相关产品推荐

