Si encuentras algún error con tu código o proyecto, recuerda probar siempre en un ambiente de testing antes añadir el código al proyecto final.
Solución:
Está en el camino correcto, puede usarlos para renderizar jsx condicionalmente o ayudar con el enrutamiento …
He usado lo siguiente con gran éxito.
Originalmente de – ¿Cómo detectar los navegadores Safari, Chrome, IE, Firefox y Opera?
// Opera 8.0+
const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
const isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) return p.toString() === "[object SafariRemoteNotification]"; )(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
// Internet Explorer 6-11
const isIE = /*@[email protected]*/false || !!document.documentMode;
// Edge 20+
const isEdge = !isIE && !!window.StyleMedia;
// Chrome 1 - 71
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
// Blink engine detection
const isBlink = (isChrome || isOpera) && !!window.CSS;
Tenga en cuenta que cada uno tiene la posibilidad de quedar obsoleto debido a cambios en el navegador.
Los uso en React así:
content(props)
if(!isChrome)
return (
Luego llamando a this.Content() en mi componente principal para representar los diferentes elementos específicos del navegador.
El pseudocódigo podría verse así… (no probado):
import React from 'react';
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
export default class Test extends React.Component
content()
if(isChrome)
return (
Chrome
)
else
return (
Not Chrome
)
render()
return (
Content to be seen on all browsers
this.content()
)
No estoy seguro de por qué, pero nadie mencionó este paquete: react-device-detect El paquete tiene muchas verificaciones de navegadores, además de versiones y otra información relacionada. Es muy pequeño y está actualizado.
Puedes usar:
import isIE from 'react-device-detect';
isIE // returns true or false
react-device-detect también es un enlace de bundlephobia muy pequeño
Este es el servicio que siempre uso cuando hago detección de navegador basada en JS/Browser: http://is.js.org/
if (is.ie() || is.edge())
window.location.href = 'http://example.com';
Reseñas y puntuaciones del tutorial
Al final de todo puedes encontrar las observaciones de otros usuarios, tú además puedes dejar el tuyo si lo deseas.