React js 页面跳转后页面显示空白，拒绝执行脚本答案

【问题标题】：React js After the page jumps, the page displays blank, Refused to execute scriptReact js 页面跳转后页面显示空白，拒绝执行脚本
【发布时间】：2022-01-04 08:13:57
【问题描述】：

react部署后，首页文件变成JavaScript文件，导致页面加载失败

当index.html的内容变成JavaScript文件后缀时会发生什么（页面静止一段时间触发路由）

报错信息如下：

                    <MenuItem
                        as={Link}
                        to="/buyertools/order-history"
                        borderRadius="4px"
                        height="45px"
                        textColor="semantics.default"
                      >

一个

两个

三：

47.d0f21705.chunk.js信息如下

<!doctype html>
<html lang="en">
    <head>
        <script>
            window.dataLayer = window.dataLayer || []
        </script>
        <style>
            .async-hide {
                opacity: 0!important
            }
        </style>
        <script>
            !function(e, n, t, a, c, s, d, i, m) {
                n.className += " " + t,
                s.start = 1 * new Date,
                s.end = d = function() {
                    n.className = n.className.replace(RegExp(" ?" + t), "")
                }
                ,
                (e[a] = e[a] || []).hide = s,
                setTimeout((function() {
                    d(),
                    s.end = null
                }
                ), 4e3),
                s.timeout = 4e3
            }(window, document.documentElement, "async-hide", "dataLayer", 0, {
                "GTM-KWJFD3C": !0
            })
        </script>
        <meta charset="utf-8"/>
        <link rel="canonical" href="https://www.michaels.com" data-react-helmet="true"/>
        <meta name="title" content="Michaels Stores – Art Supplies, Crafts & Framing" data-react-helmet="true"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="theme-color" content="#000000"/>
 
        <link rel="apple-touch-icon" href="/logo192.png"/>
        <link rel="assetlinks.json file" href="/.well-known/assetlinks.json"/>
        <link rel="apple-app-site-association file" href="/.well-known/apple-app-site-association"/>
        <link rel="manifest" href="/manifest.json"/>
        <link rel="stylesheet" href="https://use.typekit.net/skl5onh.css">
        <link rel="stylesheet" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.0/heatmap.min.js" integrity="sha512-FpvmtV53P/z7yzv1TAIVH7PNz94EKXs5aV6ts/Zi+B/VeGU5Xwo6KIbwpTgKc0d4urD/BtkK50IC9785y68/AA==" crossorigin="anonymous"></script>
        <script>
   
        </script>            <link href="/static/css/main.dcb28ad8.chunk.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
       
        <script src="/static/js/43.a7174a23.chunk.js"></script>
        <script src="/static/js/main.4cd548f1.chunk.js"></script>
    </body>
</html>

为什么index.html中的信息加载到js文件中会出现问题

如果一直点击页面，页面路由可以跳转并渲染页面信息

如出现上述问题，只有刷新地址后页面才能正常显示

我不知道为什么。请帮帮我

【问题讨论】：

标签： reactjs types mime

【解决方案1】：

您的网络服务器（显然是 nginx）似乎配置错误，它返回任何 404-ing URL 的根 index.html，包括 /static/ 下的那些。

因此，可能应该是 404 的内容会获取 index.html 内容（实际上是 HTML），而您的浏览器拒绝将其作为 JavaScript 执行（事实并非如此）。

所以，首先 - 修复服务器配置以在 /static/ 下为 404 返回 404。（对于 SPA 环境中的深度链接目的，返回其他 URL 的索引内容确实有意义。）

（考虑到该网站也在尝试 POST 到 http://undefined/，这可能不是您需要解决的唯一问题。）

【讨论】：