react-router 4.x

安装 npm install --save react-router react-router-dom
在页面中配置
1. 引入 import { Route,BrowserRouter,Switch } from "react-router-dom"
2. 基本配置

 路由配置：
    <BrowserRouter>
       <Switch>
           <Route path='/about' component={About}></Route>
           <Route path='/' component={Home}></Route>
       </Switch>
   </BrowserRouter>
   导航配置：
   <Link to='/'>首页</Link>

4.x版本路由配置规则：从上往下匹配，只要有匹配成功的，就立即停止。
精准匹配 exact 精准匹配：<Route exact path='/abcd' />

作用：用户访问的路径必须和path中的路径一模一样，才匹配成功。
路由嵌套

1.路由中出现子级路由，就是路由嵌套

2.父级组件作为嵌套路由的标签

3.嵌套路由中使用包裹所有的路由

4.子级路由的path路径要带父级路径

举例：

<BrowserRouter>
  <Switch>
      <Route exact path='/' component={Home}></Route>
      <Route path='/about' component={About}></Route>
      {/* <Route path='/kemu' component={Kemu}></Route> */}
      <!-- 科目是由子级路由的，就是一个嵌套路由 -->
      <Kemu path='/kemu'>
        <Switch>
          <Route path='/kemu/yuwen' component={Yuwen}></Route>
          <Route path='/kemu/shuxue' component={Shuxue}></Route>
          <Route path='/kemu/yingyu' component={Yingyu}></Route>
        </Switch>
      </Kemu>
  </Switch>
  </BrowserRouter>

6 . 路由嵌套时，子级路由默认选中

1. 4版本中没有这个功能，需要使用重定向实现
  重定向:Redirect
  <Redirect from='/kemu' to='/kemu/yingyu' />
2. 把嵌套路由中的Switch标签删除
3. 把重定向标签添加到所有Route上方
  <Kemu path='/kemu'>
        <Redirect from='/kemu' to='/kemu/yingyu' />
        <Route path='/kemu/yuwen' component={Yuwen}></Route>
        <Route path='/kemu/shuxue' component={Shuxue}></Route>
        <Route path='/kemu/yingyu' component={Yingyu}></Route>
  </Kemu>

7 . 路由参数

   1.定义时
       <Route path="/about/:num" componet={About} />

   2.调用使用

       <Link to='/about/5' />
       let count = 10;
       <Link to={`/about/${count}`} />
   3.接收
       在路由指定组件中接收去，
       语法：this.props.match.params.属性

8 . 高亮显示

   1.使用NavLink标签替换Link标签
   
   2.定义css样式
   
   3.精准匹配：<NavLink to='/' exact >首页</NavLink>

配置支持less

1.运行一个命令 : npm run eject 。能显示配置文件

2.在config文件夹中，找配置文件 webpack.config.js 3.打开配置文件进行编辑

    1.创建配置
        const sassRegex = /\.(scss|sass)$/;
        const sassModuleRegex = /\.module\.(scss|sass)$/;
        const lessRegex = /\.less$/;
        const lessModuleRegex = /\.module\.less$/;
    2.添加loader
        1.ctrl+f 查询 sassRegex
        2.复制sassRegex 、sassModuleRegex 对应的对象
        3.把复制的两个对象中所有的sass 改成 less 即可

4.安装 less-loader npm i --save-dev less less-loader

5.重新运行 npm start

props类型检测

1.PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的.

2.使用：

    1.引入 import PropTypes from 'prop-types';
    2.配置
        1.验证功能
            组件.propTypes={
                属性名:PropTypes.验证类型
                uname:PropTypes.string,         基本类型
                upwd:PropTypes.oneOfType([      多选一
                    PropTypes.string,
                    PropTypes.number
                ]),
                sex:PropTypes.any.isRequired    必选项
            }
        2.默认 Prop 值
            组件.defaultProps ={
                属性名:默认值
            }

antd组件库

1.antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品

2.安装 npm install antd --save

3.全局引入css

import 'antd/dist/antd.css';

按需引入css

4.使用组件

1.引入组件 import {Carousel} from 'antd'
2.页面结构:
    <Carousel autoplay>
        <div></div> 
  </Carousel>

3.API

是以属性形式调用的

1.属性形式:<Carousel autoplay effact='fade'>

2.函数形式的：<Carousel afterChange={this.afterChange.bind(this)}>

需要定义函数

afterChange(){ }

4.方法使用ref，获取DOM元素，然后再调用方法。

react (入门)二

react-router 4.x

配置支持less

props类型检测

antd组件库