La différence entre React HashRouter et BrowserRouter et les scénarios d'utilisation

1. Introduction

• Dans une application monopage, comment ne pas actualiser le navigateur après avoir changé de page ? Afin de résoudre ce problème, il existe deux méthodes, à savoir hash路由模式, history路由模式, et react routerles deux itinéraires utilisent ces deux modes de routage.

Deux, la différence

• HashRouter

  • Basé sur le hashmode : Le principe du saut de page est d'utiliser le mode location.hash, location.replaceet d'obtenir le même résultat.vue routerhash

  • Plus laid : Après le nom de domaine, épisser d'abord /#, puis épisser le chemin, c'est-à-dire utiliser le point d'ancrage pour réaliser le saut de l'itinéraire. Tel que : http://www.dzm.com/#/xx

• BrowserRouter

  • Basé sur historyle modèle : Le principe du saut de page est d'utiliser pour ajouter deux nouveaux objets HTML5pour l'objet global du navigateur , dont , et d'implémenter le même modèle.historyAPIhistory.pushStatehistory.replaceStatevue routerhistory

  • Encore plus élégant : raccordez directement les chemins. Tel que : http://www.dzm.com/xx

  • Le backend doit effectuer le traitement des requêtes : après avoir changé d'itinéraire, le chemin de l'interface de requête changera et le backend doit coopérer avec le traitement.

  • Compatibilité : les navigateurs dotés de versions inférieures peuvent ne pas le prendre en charge. Actuellement, tous les navigateurs populaires du marché devraient le prendre en charge. Vous pouvez l'utiliser en toute confiance, sauf cas particulier.

3. Scénarios d'utilisation

• HashRouter

  • Déploiement du projet sur l'intranet : comme to Ble projet, le projet utilisé par les métiers de l'entreprise, etc.

• BrowserRouter

  • Projets déployés sur le réseau public : pour to Cles projets et les projets destinés au public, urll'esthétique du chemin est bien sûr meilleure, mais le back-end doit être traité, mais actuellement toil est pratiquement utilisé partout, sauf circonstances particulières.

4. Utiliser

• Installation, ci-joint : utilisation détaillée du routage

  # 默认安装最新版本，当前是 6.x
  $ npm install --save react-router-dom
  

• index.tsx

  import React from 'react'
  import {
        
        
    // HashRouter as Router, // hash模式
    BrowserRouter as Router, // history模式
    Route,
    Switch,
  } from 'react-router-dom'
  import Home from '../containers/home'
  
  const BasicRouter = () => (
    <Router>
      <Switch>
        <Route exact path="/" component={
        
        Home} />
      </Switch>
    </Router>
  )
  
  export default BasicRouter