A diferença entre reagir HashRouter e BrowserRouter e cenários de uso

1. Introdução

• Em um aplicativo de página única, como você não atualiza o navegador após trocar de página? Para resolver este problema, existem dois métodos, ou seja hash路由模式, history路由模式, e react routeras duas rotas usam esses dois modos de roteamento.

2. Diferença

• HashRouter

  • Com base no hashmodo: O princípio do salto de página é usar o modo de location.hash, location.replacee para conseguir o mesmo.vue routerhash

  • Mais feio: Depois do nome de domínio, emendar primeiro /#e depois emendar o caminho, ou seja, usar o ponto de ancoragem para realizar o salto da rota. Como: http://www.dzm.com/#/xx

• BrowserRouter

  • Com base historyno padrão: O princípio do salto de página é usar para adicionar dois novos objetos HTML5ao objeto global do navegador , incluindo , e para implementar o mesmo padrão.historyAPIhistory.pushStatehistory.replaceStatevue routerhistory

  • Ainda mais elegante: concatene caminhos diretamente. Como: http://www.dzm.com/xx

  • O back-end precisa processar a solicitação: depois de mudar a rota, o caminho da interface da solicitação mudará e o back-end precisará cooperar com o processamento.

  • Compatibilidade: Navegadores com versões inferiores podem não suportá-lo. Atualmente, todos os navegadores populares no mercado devem suportá-lo. Você pode usá-lo com confiança, a menos que seja um caso especial.

3. Cenários de uso

• HashRouter

  • Implantação do projeto na intranet: como to Bo projeto, o projeto utilizado pelo pessoal comercial da empresa, etc.

• BrowserRouter

  • Projetos implantados na rede pública: Para to Cprojetos e projetos voltados ao público, urla estética do caminho é obviamente melhor, mas o back-end precisa ser processado, mas atualmente toé usado basicamente em todos os lugares, exceto em circunstâncias especiais.

4. Uso

• Instalação, em anexo: uso detalhado de roteamento

  # 默认安装最新版本，当前是 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