react-router的理解

1. react的一个插件库react-router库中还有3个包web、native、any
2. 专门用来实现一个SPA应用
3. 基于react的项目基本都会用到此库

React路由底层原理

参考文献：React 路由传参react-router-dom 的使用自定义导航的三种方式_withRouter()
React Router甚至大部分的前段路由都是依赖于history.js的，他是一个独立的第三方js库。可以用来兼容不同浏览器、不同环境下对历史记录的管理，拥有统一的API。

//默认使用的是history模式
import { BrowserRouter as Router} from 'react-router-dom';
//更改为hash模式
import { HashRouter as Router} from 'react-router-dom';

• 低版本浏览器的history：通过 hash 用来存储不同状态下的 history 信息对应 createHashHistory ，通过检测 location.hash 的值的变化，使用 location.replace 方法来实现url跳转。通过注册监听 window 对象上的 hashChange 事件来监听路由的变化，实现历史记录的回退。
• 高版本浏览器：利用HTML5里的history，对应 createBrowserHistory ，使用包括 pushState ， replaceState 方法来进行跳转。通过注册监听 window 对象上的 popstate 事件来监听路由的变化，实现历史记录的回退。
• node环境下：在内存中进行历史记录的存储，对应 createMemoryHistory 。直接在内存里 push 和 pop 状态。

  React-router-dom 及 相关API

  使用

  React-router官网

  安装

  yarn add react-router-dom yarn add @types/react-router-dom rrd是js库，用于类型声明

1.项目目录/src/index.tsx/ 设置 路由器/设置路由模式

react-router-dom 提供了两种路由器 **HashRouter / BrowserRouter**，两者之间的主要区别是它们存储URL和与Web服务器通信的方式

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

此时顶级元素( 组件 )包装在了BrowserRouter路由器中，现有BrowserRouter管理。

2.创建 路由组件 及 路由表

路由组件 放在路由渲染区域 src/router/index.tsx
路由表 src/router/routes.ts

内置组件