React ReactRouter、路由的使用、路由的相关组件(笔记)

1. 单页面应用(SPA)

• SPA (single page web application) 应用
• vue 是单页面应用，所谓单页面应用就是页面发生改变并不会刷新，只是进行路由跳转
• 单页面应用就是根据 hash 值来变化的，当哈希值改变页面不会发生跳转
• vue 的单页面需要借助到 vueRouter 进行路由跳转

2. 路由的理解

2.1 什么是路由

• 一个路由就是一组映射关系（key - value)
• key 为路径, value 可能是 function 或 component

2.2 路由分类

• 后端路由：
  1. 理解：value 是 function，用于处理客户端提交的请求
  2. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
• 前端路由：
  1. 理解：value 是 component，用于展示页面内容
  2. 工作过程：当浏览器的路径改变时，对应的组件就会显示

3. react-router-dom的理解

• react 的一个插件库
• 专门用来实现一个 SPA 应用
• 基于 react 的项目基本都会用到此库

4. 路由的基本使用

4.1 路由的相关组件

• BrowserRouter：历史模式路由

  • 功能：用于包裹一个容器，使该容器中的路由以 history 模式展示
  • 用法：<BrowserRouter> <App/> </BrowserRouter>

• HashRouter：hash 模式路由

  • 功能：用于包裹一个容器，使该容器中的路由以 hash 模式展示
  • 用法：<HashRouter> <App/> </HashRouter>

• Link：路由跳转

  • 功能：进行路由路径的切换，页面上会转换成 a 标签
  • 用法：<Link to="/demo"> Demo </Link>

• NavLink：加强版路由跳转

  • 功能：Link 组件的加强版，选中时可自动添加类名，用法和 Link 一样
  • 用法：<NavLink activeClassName="active(默认)" to="/demo"> Demo </NavLink>

• Route：注册路由

  • 功能：通过对应的路由路径，展示对应的组件，也称注册路由
  • 用法：<Route path="/demo" component={Demo} />

• Switch：改变路由匹配规则

  • 功能：用于包裹 Route 组件
  • 介绍：Route 每次进行切换时，都会全部进行匹配一次，但是使用了 Switch 只要匹配中了，就不会在向下匹配了，用于提高路由匹配效率

• Redirect：路由重定向

  • 功能：对路由进行重定向，当所有路由都无法匹配时，跳转到 Redirect 指定的路由
  • 用法：<Redirect to="/demo">

• withRouter：加工一般组件

  • 功能：对一般组件进行加工，使得一般组件可以使用路由组件的一些API

  • 用法：

    import { withRouter } from "react-router-dom";
    
    class Demo extends Component {}
    
    export default withRouter(Demo)
    

4.2 Link与NavLink特殊用法

• 在写路由切换组件时，中间是肯定要写内容的，所以 Link/NavLink 一般都为双标签

• 还有一种单标签的写法，children 会自动把其中的值当做内容

  <NavLink to="/demo1" children="Demo1" />
  <Link to="/demo2" children="Demo2" />
  

4.3 组件的props.children(拓展)

// Demo 组件
class Demo extends React.Component {
  render(){
    console.log(this.props.children); // Hello world!
    return xxx
  }
}

<!--
  其他组件
  标签体是一个特殊的标签属性
-->
<Demo>Hello world!</Demo>  ===  <Demo children="Hello world!" />

4.4 路由组件与一般组件

• 写法不同：
  • 一般组件：<Demo />
  • 路由组件：<Route path="/demo" component={Demo} />
• 存放位置不同：
  • 一般组件：components
  • 路由组件：pages
• 接收到的 props 不同：
  • 一般组件：写组件标签时传了什么，props 就能接收到什么
  • 路由组件：接收到三个固定的属性，history、location、match

4.5 路由的严格匹配

• 路由默认是模糊匹配，在 Route 组件上添加 exact 属性，开启严格匹配
• 不要随便添加 exact 属性，可能会导致二级路由无法匹配

4.6 push与replace

<!-- link 默认开启的是 push 模式 -->
<Link replace to="/demo">Demo</Link>

4.7 路由重定向

重定向也是使用组件，功能与用法在路由相关的组件有写

5. 嵌套(多级)路由

5.1 嵌套路由规则

• 注册子路由时要写上父路由的 path 值
• 路由的匹配是按照注册路由的顺序进行的(先父后子)

5.2 路由传参

• params

  <!-- 跳转路由时，传递参数 -->
  <Link to="/demo/10/标题"></Link>
  
  <!-- 注册路由时，声明参数 -->
  <Route path="/demo/:id/:title" component={Demo} />
  

  // 路由组件中，接收参数
  render(){
    let params = this.props.match.params
  }
  

• search/query

  <!-- 传递参数 -->
  <Link to="/demo/?id=10&title=标题"></Link>
  

  // 接收参数
  // React 帮忙下载了 qs 库
  import qs from "querystring"
  render(){
    let search = this.props.location.search // "?id=10&title=标题"
    let { id, title } = qs.parse(search.slice(1))
  }
  

• state/body

  <!-- 传递参数 -->
  <Link to={{pathname: "/demo", state: {id:10, title:"标题"}}}></Link>
  

  // 接收参数
  render(){
    let state = this.props.location.state
  }
  

6. 编程式路由

• push

  // 追加一条路由
  this.props.history.push("/demo/10/标题") // 传递 params 参数
  
  this.props.history.push("/demo/?id=10&title=标题") // 传递 search 参数
  
  this.props.history.push("/demo",{id:10,title:"标题"}) // 传递 state 参数
  

• replace

  // 替换当前路由，用法和 push 一样
  

• goBack

  // 后退
  this.props.history.goBack()
  

• goForward

  // 前进
  this.props.history.goForward()
  

• go

  // 大于0前进，小于0后退，等于0刷新
  this.props.history.goBack(n)
  

7. BrowserRouter与HashRouter

• history：BrowserRouter

  • 是对浏览器的历史记录进行操作，可以看到当我们点击浏览器的前进/后退按钮时，浏览器并不会进行刷新，这就是对浏览器历史记录进行的操作
  • BrowserRouter 使用的是 H5 的 history API，不兼容 IE9 以下版本
  • 不带 # 号

• hash：HashRouter

  • 更改不同的锚链接切换对应的组件，锚链接的更改并不会对浏览器进行刷新
  • HashRouter 刷新后会导致路由的 state 参数丢失
  • 带 # 号