【BrowserRouter与HashRouter的区别】

BrowserRouter与HashRouter的区别

1.底层原理不同：

BrowserRouter使用的是H5的history API，不兼容IE9及以下版本
HashRouter使用的是URL的哈希值

2.path的表现形式不同

BrowserRouter的路径中没有#，例如：location:3000/demo/test
HashRouter的路径包含#，例如：localhost:3000/#/demo/test

3.刷新后对路由state参数的影响

（1）BrowserRouter没有任何影响，因为state保存在history对象中
（2）HashRouter刷新后会导致路由state参数的丢失

4.HashRouter可以用于解决一些路径错误的问题

5.使用

BrowserRouter

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    {/* The rest of your app goes here */}
  </BrowserRouter>,
  root
);
1
2
3
4
5
6
7
8
9
10

HashRouter

import * as React from "react";
import * as ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";

ReactDOM.render(
  <HashRouter>
    {/* The rest of your app goes here */}
  </HashRouter>,
  root
);
1
2
3
4
5
6
7
8
9
10