# react脚手架课件

**Repository Path**: inarutor/react_staging

## Basic Information

- **Project Name**: react脚手架课件
- **Description**: react脚手架课件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-05-12
- **Last Updated**: 2023-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README










## 四、路由组件与一般组件
    1.写法不同:
        一般组件: <Demo/>
        路由组件: <Route path="/demo" component={Demo}/>
    2.存放位置不同:
        一般组件: components
        路由组件: pages
    3.接收到的props不同:
        一般组件:写组件标签时传递了什么，就能收到什么
        路由组件:接收到三个固定的属性
                history:
                    go: f go(n)
                    goBack: f goBack()goForward: f goForward()
                    push: f push(path, state)
                    replace: f replace(path, state)
                location:
                    pathname: "/about
                    search: un
                    state: undefined
                match:
                    params : {}
                    path: "/about"
                    url: "/about"


## 五、NavLink与封装NavLink
    1.NavLink可以实现路由接的高亮，通过activeClassName指定样式名
    2.标签体内容是一个特殊的标签属性
    3.通过this.props.children可以获取标签体内容

## 六、Switch的使用
    1.通常情况下，path和component是一一对应的关系。
    2.Switch可以提高路由匹配效率(单一匹配)。


## 十四、antd的按需引入+自定主题

    1.安装依赖: yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
    2.修package.json
    ...
    scripts":{
        "start":"react-app-rewired start",
        "build":"react-app-rewired build",
        "test":"react-app-rewired test",
        "eject":"react-scripts eject"
    }.
    ...
    3.根目录下创建config-overrides.js

    //配置具体的修改规则
    const ( override, fixBabelImports,addLessLoader) = require('customize-cra');
    module.exports = override(
        fixBabelImports('import',{
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
        }),
        addLessLoader({
            flessOptions:{
                javascriptEnabled: true,
                modifyVars: {'@primary-color' : 'green'},
            }
        }),
    );
    4.备注: 环用在组件里亲自引入样式了，即: import 'antd/dist/antd.css'应该删掉