React 入门（2）- 路由 React Router

• 1. 概述
• BrowserRouter与HashRouter的区别
• 安装和使用

环境:

• React 17.x
• react-router-dom: 5.2

1. 概述

React 本身是一个极简的类库，并且遵循渐进式原则，所以是不带路由（Router）功能的。对于稍复杂些的应用，没有路由显然是不可以的，所以就需要引入路由（React Router）库。

React Router 从5.0开始只分为Core，Web 和Native3种。 从5.0开始，彻底将原本的针对网页使用的react-router的npm package命名改为了react-router-dom。也就是说，针对web应用，用react-router-dom吧。（本文暂不涉及Native)

官方文档： https://reacttraining.com/react-router/

BrowserRouter与HashRouter的区别

React Router 有2中模式，BrowserRouter与HashRouter，下面我们来看一下区别

1. url表现形式不一样，看是否包含#

• BrowserRouter没有，例如：http://localhost:3000/about
• HashRouter的路径包含＃，例如：http://localhost:3000/#/about

2. 底层原理不一样

• BrowserRouter使用的是HTML5的history API(window.history.pushState, popState)
• HashRouter使用的是URL的哈希值。

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

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

安装和使用

1. 安装：
   npm i react-router-dom

2. 简单使用，
   参考：https://reactrouter.com/web/guides/quick-start