React - 路由模式 BrowserRouter 和 HashRouter 的区别与使用

一. 路由模式 BrowserRouter 和 HashRouter 的区别

1. 底层原理不一样
   （1） BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
   （2） HashRouter使用的是URL的哈希值。
2. path表现形式不一样。
   （1）BrowserRouter的路径中没有#，例如：http://localhost:3000/home
   （2）HashRouter的路径包含#，例如：http://localhost:3000/#/home
3. 刷新后对路由state参数的影响。
   （1）BrowserRouter没有任何影响，因为state保存再history对象中
   （2）HashRouter刷新后会导致路由state参数的丢失
4. HashRouter可以用于解决一些路径错误相关的问题。
5. 一般使用BrowserRouter模式。

二. 路由模式 BrowserRouter 和 HashRouter 的使用

1. HashRouter 模式

   import React from "react";
   import ReactDOM from "react-dom";
   import { HashRouter } from "react-router-dom/";
   import App from "./App";
   ReactDOM.render(
     <HashRouter>
       <App />
     </HashRouter>,
     document.getElementById("root")
   );
   

2. BrowserRouter模式

   import React from "react";
   import ReactDOM from "react-dom";
   import { BrowserRouter } from "react-router-dom/";
   import App from "./App";
   ReactDOM.render(
     <BrowserRouter>
       <App />
     </BrowserRouter>,
     document.getElementById("root")
   );