web-dev-qa-db-fra.com

Détection de navigateur dans ReactJS

Existe-t-il un moyen de détecter le navigateur IE avec React et de le rediriger vers une page ou d'envoyer un message utile? J'ai trouvé quelque chose en JavaScript, mais je ne savais pas comment l'utiliser avec React + TypeScript.

var isEdge = !isIE && !!window.StyleMedia;

javascriptreactjstypescript
5
Hafiz Temuri

Vous êtes sur la bonne voie, vous pouvez les utiliser pour rendre conditionnellement le rendu de jsx ou pour aider au routage.

J'ai utilisé ce qui suit avec un grand succès.

Originaire de - Comment détecter les navigateurs Safari, Chrome, IE, Firefox et Opera?

let isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
let isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
let isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
let isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
let isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
let isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
let isBlink = (isChrome || isOpera) && !!window.CSS;

S'il vous plaît être conscient qu'ils ont chacun une chance de devenir obsolète en raison de modifications du navigateur.

Je les utilise pour réagir comme ça. 

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

Ensuite, en appelant {this.Content ()} dans mon composant principal pour afficher les différents éléments spécifiques au navigateur.

Le code Sudo pourrait ressembler à quelque chose comme ça ... (non testé).

import React from 'react';

let isChrome = !!window.chrome && !!window.chrome.webstore;

export default class Test extends React.Component {

  content(){
    if(isChrome){
        return (
            <div>Chrome</div>
        )
    } else {
        return (
            <div>Not Chrome</div>
        )
    }
  }

    render() {
        return (
            <div>Content to be seen on all browsers</div>
            {this.content()}
        )
    }
}
16
Shawn Matthews

C’est le service que j’utilise toujours lors de la détection de navigateur par JS/Browser: http://is.js.org/

if (is.ie() || is.Edge()) {
  window.location.href = 'http://example.com';
}
1
Tallboy