在加载react之前运行JavaScript脚本，以便在浏览器为Internet Explorer的情况下不渲染reac

Question

我想运行一个javascript脚本来检测用户浏览器，如果浏览器是IE(我的应用程序不支持，不打算这样做，但有几个用户遇到了这个问题(，我不想让应用程序只显示一条消息，说浏览器不支持等等。

脚本非常简单：

function isBrowserSupported() {
var userAgent = window.navigator.userAgent
var isIE10orLower = userAgent.indexOf("MSIE ")
var isIE11 = userAgent.indexOf("Trident/")

return !(isIE10orLower > 0 || isIE11 > 0)
}

if (!isBrowserSupported()) {
var warningTextElement = document.createElement("span")
warningTextElement.innerHTML = "<h1>This browser is not supported. Please change it.</h1>"
document.querySelector("#react-root").removeNode()
document.querySelector("body").appendChild(warningTextElement)
}
I am importing the script on the index.html file like that:
<script type="text/javascript" src="detectUnsupportedBrowsers.js"></script>

在这个脚本中，我删除了react-root节点，这感觉有点麻烦，它可以工作，但我想知道是否有更好的方法(比如在react渲染之前我可以执行脚本的地方？(。

谢谢。

Answer 1

您所尝试的一切都很好。您可以有条件地将app或warning text呈现为index.js文件中的rootdiv。

我会试试下面的样子。

import ReactDOM from "react-dom";
import App from "./App";
function isBrowserSupported() {
var userAgent = window.navigator.userAgent;
var isIE10orLower = userAgent.indexOf("MSIE ");
var isIE11 = userAgent.indexOf("Trident/");
return !(isIE10orLower > 0 || isIE11 > 0);
}
const rootElement = document.getElementById("react-root");
ReactDOM.render(
<>
{isBrowserSupported() ? (
<App />
) : (
<h1>This browser is not supported. Please change it.</h1>
)}
</>,
rootElement
);

代码沙盒=>https://codesandbox.io/s/wispy-waterfall-ibzmg?file=/src/index.js