# react

**Repository Path**: chen_xumayun/react

## Basic Information

- **Project Name**: react
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-05
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### cnpm i -D node-sass

### cnpm i -S antd

### 11-6 路由的基础认识

- BrowserRouter: 路由根容器 --- 底层是 history 封装
  属性：basename 表示路由的根路径，一般用于打包后的二级目录
  目录
  getUserConfirmation 用于确认导航功能，不常用
  forceRefresh 当为 true 的时候，路由跳转会使页面整体刷新，强制重新加载
  Link: 导航 --- 被渲染成 a 标签
  属性：to 表示要跳转的地址
  to={{pathname:'/home',search:'',hash:'',state:{}}
  pathname 要跳转的地址 search 地址栏传参 hash 地址栏带#值 state 在路由 js 中携带过去的状态值
  Route: 线路 --- 匹配导航地址，渲染对应的内容
  属性：path 匹配地址栏地址的 exact 精确匹配；sensitive 区分地址大小写
  component 用来加载组件的，切记，他只接受两种格式的数据，class 和函数
  render 用来加载组件，只接受一个函数
  children 也是用来加载组件的，只接受一个函数
  权重：component> render>children
  注意：在一个路由程序里，尽量使用一种加载组件的方式，不要混用

### 11-7 路由匹配原理

1. 匹配原理贪婪模式：只要包含就会被匹配到，需要给基础线路添加 exact 属性；

### 11-8 NavLink

1. NavLink：一个特殊的 link，当匹配成功时会添加样式；link 上的特性 NavLink 都有
2. 属性值：exact 精确匹配，解决的也是贪婪模式下匹配多个的问题；
   activeClassName：指定一个选中时高亮的样式类名
   activeStyle 指定高亮时的内联样式
   isActive：【很重要】当我们需要额外的对导航进行绑定高亮的样式时，此属性接收一个函数该函数接收两个参数，第一个是 macth，如果 match 不为 null，则表示地址栏匹配到了该导航；第二个是 location，它里面有一个 pathname 属性，表示当前地址栏的路径，一般用来判断；
   isActive 属性里的函数必须要有返回值，true 表示被选中，false 表示不被选中

### 11-11 动态路由

- 定义：一个 Route 动态匹配到多个导航地址
  语法；<Route path='/path/:id'>
  注意：动态路由里导航地址的拼接用 url，线路地址用 path 拼接；
  获取值：在 props.match.params 对象里

### 11-12

- Prompt 它是我们 react 路由里的拦截器组件
  参数：
  1. when<bool>：为 false 的时候则 Prompt 组件不会执行，true 的时候才会执行
  2. message<String|fn>：String 的时候就是提示内容，默认表现形式是 alert 弹框，一般我们不会这种形式，采用 function 的形式用组件去弹出；fn 的时候，fn 接收两个参数，第一个是 location，第二个是 action：location 对象是准备进入的下一个路由数据，一般用它来做判断；action 表示本次跳转路由的动作类型：push、replace 等
     注意：message 如果接收的是一个函数，那么该函数必须返回 bool 值，false 表示禁止路由跳转，true 就是正常.
  3. 使用场景：
     3.1 在一个填写表单的页面中如果用户未完成表单，此时跳转路由就需要提示用户是否跳转用于优化用户体验
     3.2 在一些需要权限的页面，如果用户不符合要求，则进入该页面时需要做权限的判断及拦截
  4. Prompt 触发的时机：当用户离开该路由有页面的时候，通俗的讲就是用户行为导致的路由改变，Prompt 才会触发

### 11-13

- Routr 外部跳转
  1. 非路由组件内是没有路由信息数据的我们需要 js 控制其路由行为，有两种解决办法
     1.1 使用路由的 withRouter 高级方法，将非路由组件包裹 withRouter(Mycomponent),使用之后该组件拥有该路由的所有特性，路由信息，路由生命周期
     1.2 使用路由容器 BrowserRoouter 进行实例化会得到实例化后的路由对象，该对象理由 location，基本上满足路由的使用【可选】；
  2. 重定向
  - 2.1 Redirect
    属性：to：<string|objext>:string 表示要重定向的地址：object 是和 NavLink 上 to 属性写的参数一样；
    属性：form：<string>:表示地址栏里的地址，匹配到了之后会执行对应的 to 属性地址进行重定向，需要注意的是 from 属性必须在 SSwitch 组件中才会有效;
    概念：重定向是当用户访问一个链接的时候，有程序控制用户最终访问的地址，比如说用户访问 www.webpack.com 我们用重定向给用户跳转到 webpack.cn；这个动作就叫做重定向

### 11-14
  Redirect: 重定向组件 - 2.1 Redirect:
    属性:to<string|object>:
        string:表示要重定向的地址；
                    object:是和NavLink上to属性写的参数一样；

        from<string>:
            表示地址栏里的地址，匹配到了之后会执行，对应的to属性地址进行跳转，需要注意的是from属性必须在Switch组件中才会执行；

        概念:
            重定向是当用户访问一个连接的时候，由程序控制用户最终访问的地址；比如说用户访问www.webpack.com 我们用重定向给用户跳转到webpack.cn；这个动作就叫重定向
  安装redux
  cnpm i -S redux