Javascript ReactJS中的浏览器检测

是否有任何方法可以通过React检测IE浏览器，并重定向到某个页面或提供任何有用的消息。我在JavaScript中找到了一些东西，但不确定如何将其用于React+TypeScript

---

varisedge=！伊西&！！window.StyleMedia
这是我在执行基于JS/浏览器的浏览器检测时始终使用的服务：

您已经走上了正确的道路，您可以使用它们有条件地呈现jsx或帮助路由

我已经成功地使用了以下方法

原籍：

请注意，由于浏览器更改，它们都有可能被弃用

我用它们来做如下反应：

 content(props){
    if(!isChrome){
     return (
      <Otherjsxelements/>
     )
    }
    else { 
     return (
      <Chromejsxelements/>
     )
    }
  }

内容（道具）{
如果（！异色）{
返回(
)
}
否则{
返回(
)
}
}

然后在我的主组件中调用{this.Content（）}来呈现不同的浏览器特定元素

伪代码可能看起来像这样。。。（未经测试）：

从“React”导入React；
恒等色=！！window.chrome&（！！window.chrome.webstore | |！！window.chrome.runtime）；
导出默认类测试扩展React.Component{
内容（）{
if（变色）{
返回(
铬
)
}否则{
返回(
不是铬
)
}
}
render（）{
返回(
要在所有浏览器上查看的内容
{this.content（）}
)
}
}
试试：

const isEdge=window.navigator.userAgent.indexOf（'Edge'）！=-1.
const isIE=window.navigator.userAgent.indexOf（'Trident'）！=-1 && !伊塞奇

等等

每个浏览器都有一个不同的用户代理，您可以进行检查

当然，客户可以伪造这些，但在我看来，这是一个更可靠的长期解决方案。
您可以像这样为IE编写测试

<script>
     // Internet Explorer 6-11
          const isIE = document.documentMode;
          if (isIE){
            window.alert(
              "Your MESSAGE here."
            )
          }
</script>


//Internet Explorer 6-11
const isIE=document.documentMode；
如果（isIE）{
窗口警报(
“您的留言在这里。”
)
}
这是您可以从客户端的浏览器中获得的所有信息（使用react）：

浏览器是
browserName
这几乎让我崩溃了，但我发现了一些看起来非常简单和直接的东西，使用供应商名称。例如谷歌、苹果等
navigator.vendor.includes（'Apple'）
我希望这对其他人有所帮助。
不知道为什么，但没有人提到这个软件包：
该软件包有很多浏览器检查，加上版本和一些其他相关信息。
它真的很小，而且已经更新了

您可以使用：

import { isIE } from 'react-device-detect';
isIE // returns true or false

react device detect它也很小
我在react站点使用Gatsby，构建给我带来了接受答案的麻烦，所以我在加载时使用了
useEffect
，至少不能为IE渲染：

  const [isIE, setIsIE] = React.useState(false);

  React.useEffect(() => {
    console.log(`UA: ${window.navigator.userAgent}`);
    var msie = window.navigator.userAgent.indexOf("MSIE ");
    setIsIE(msie > 0)
  }, []);

  if(isIE) {
    return <></>
  }

// In my component render

if(isIE) { return <></> }

const[isIE，setIsIE]=React.useState（false）；
React.useffect（（）=>{
log（`UA:${window.navigator.userAgent}`）；
var msie=window.navigator.userAgent.indexOf（“msie”）；
setIsIE（msie>0）
}, []);
如果（isIE）{
返回
}
//在我的组件渲染中
if（isIE）{return}

最初的想法来自：


及

例如，您可以更改模式内容，甚至根据您的路由器，让它调用函数并将您重定向到帮助页面。如果您需要这些部件在组件内部的安装位置的额外细分，请告诉我。最好查看@Tallboy提供的库，因为这样更有可能定期更新。那么就用我为React集成提供的例子吧。也许试试这个。。。让isSafari=navigator.userAgent.indexOf（“Safari”）>-1；这些方法经常被更改。这些方法现在已被弃用。这可能会导致永无止境的重定向循环。在我看来，这不是一种理想的处理方式。在我的情况下，如何实现无限重定向？您只需确保该页面上不会发生这种情况。如果不为可能的重定向循环创建条件，您还如何重定向到基于浏览器的页面？您在原始邮件中说“重定向到页面”，因此我完全按照您的要求回答了问题。更不用说，您刚才标记为正确的答案与我没有重定向的答案完全相同，这是您最初要求的。重定向到同一应用程序的页面。它可能会在相同的
if
语句中结束，并使其反复重定向。您不能直接使用它，因为navigator必须仅在DOM渲染上/之后运行。即使我使用
Chrome
，但它仍然对
window.navigator.appName
显示
Firefox
的相同结果，
Edge
和
IE
right。。我在：
“browserVersion1a”：“5.0（Macintosh；英特尔Mac OS X 10_15_1）AppleWebKit/537.36（KHTML，像Gecko）chrome/78.0.3904.70 Safari/537.36”
和
“browserVersion1b”：“Mozilla/5.0（Macintosh；英特尔Mac OS X 10_15_1）AppleWebKit/537.36（KHTML，像Gecko）chrome/78.0.3904.70 Safari/537.36”
谢谢，我知道这是有益的，但我不认为这会有帮助。因为你需要做大量的解析才能把名字弄出来。另外，如果他们决定改变格式，它将停止工作。我现在要坚持@Shawn Matthews的答案。当然，我现在知道了@HafizTemuri，但也许你应该尝试在下一个问题中添加这些信息，我们是开发人员，而不是千里眼。在我个人看来，这个软件包在某些方面为我们节省了很多时间：首先，因为你不必自己编写任何代码；其次，你不会花时间重构代码，因为某些浏览器版本不再支持你的代码。我强制执行关于包大小的信息，因为，在我个人看来，在这种情况下，轻包不是一个过度使用，过度使用是花费时间进行过早优化。我不这么认为
<script>
     // Internet Explorer 6-11
          const isIE = document.documentMode;
          if (isIE){
            window.alert(
              "Your MESSAGE here."
            )
          }
</script>

    let latitude
    let longitude
    const location = window.navigator && window.navigator.geolocation

    if (location) {
      location.getCurrentPosition(position => {
        latitude = position.coords.latitude
        longitude = position.coords.longitude
      })
    }

    var info = {
      timeOpened: new Date(),
      timezone: new Date().getTimezoneOffset() / 60,
      pageon: window.location.pathname,
      referrer: document.referrer,
      previousSites: window.history.length,
      browserName: window.navigator.appName,
      browserEngine: window.navigator.product,
      browserVersion1a: window.navigator.appVersion,
      browserVersion1b: navigator.userAgent,
      browserLanguage: navigator.language,
      browserOnline: navigator.onLine,
      browserPlatform: navigator.platform,
      javaEnabled: navigator.javaEnabled(),
      dataCookiesEnabled: navigator.cookieEnabled,
      dataCookies1: document.cookie,
      dataCookies2: decodeURIComponent(document.cookie.split(';')),
      dataStorage: localStorage,
      sizeScreenW: window.screen.width,
      sizeScreenH: window.screen.height,
      sizeDocW: window.document.width,
      sizeDocH: window.document.height,
      sizeInW: window.innerWidth,
      sizeInH: window.innerHeight,
      sizeAvailW: window.screen.availWidth,
      sizeAvailH: window.screen.availHeight,
      scrColorDepth: window.screen.colorDepth,
      scrPixelDepth: window.screen.pixelDepth,
      latitude,
      longitude
    }
    console.log(info)


import { isIE } from 'react-device-detect';
isIE // returns true or false

  const [isIE, setIsIE] = React.useState(false);

  React.useEffect(() => {
    console.log(`UA: ${window.navigator.userAgent}`);
    var msie = window.navigator.userAgent.indexOf("MSIE ");
    setIsIE(msie > 0)
  }, []);

  if(isIE) {
    return <></>
  }

// In my component render

if(isIE) { return <></> }