React第六天

context

步骤：

 第一步：先创建一个context上下文的文章,文件名叫context.js并导出

   const  myContext= React.createContext（）

    export { myContext };

第二步：分别在提供者和消费者位置引入上下文

第三步：在“顶级”组件设置提供者

    
        
    

第四步：在需要的子级组件“消费”数据

    
        {
            (item)=>{

                return  (
文章标题组件--{ item.txtColor }
)
            }

        }

    

React路由

目前针对浏览器的路由最新版本：react-router-dom v4.x

通过active设置高亮样式

第一步：安装react-router-dom
npm install react-router-com --save

第二步：在src下创建一个router目录并添加index.js设置路由

 说明：
    //路由文件
    import { HashRouter,BrowserRouter as LuYou,Switch,Route,Redirect } from 'react-router-dom'

    1. 路由模式的两种方式：
      （1） HashRouter :哈希路由 特征：/#/home

       (2)BrowserRouter: url访问的路由 特征：/home

       注：as 可以重命名
    2.Switch：只匹配一个子元素
    3.Route：对匹配的路径，渲染对应的组件视图  相当于vue中的
    4.Redirect:路由跳转 to指定要跳转的路径



    import Home from './../pages/home'
    import Cate from './../pages/cate'
    import Cart from './../pages/cart'
    import About from './../pages/about'

    class RouerConfig  extends Component {
        state = {  }
        render() { 
            return (
                
                    
                        

                          注：exact精确匹配

                        
                        
                        
                        
                    
                
            );
        }

    
    }
    
    export default RouerConfig;

第三步：（可选）封装一个footer和HeaderCom组件

 在FoorterCom中添加要跳转地导航

 例如：

    import {NavLink,Link} from 'react-router-dom'

    说明：

       1.Link:实现无高亮样式的跳转     适用场景：在一个页面中可能只有很少的几处用到跳转的地方 例如：登录，选择产品
       2.NavLink:实现带高亮样式的跳转  适用场景：导航

    //引入footer样式
    import './footer.css'

    class FooterCom extends Component {
        state = {  }
        render() { 
            return ( 
                

                    首页

                        注：exact精确匹配,to:要跳转的路径（路径类型即可以是字符串，也可是对象）

                        详细看官方路由文档：https://reacttraining.com/react-router/web/api/Link/to-object
                      
                    分类
                    购物车
                    关于
                
            );
        }
    }
    
    export default FooterCom;