React第六天

context

步骤：

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

   const  myContext= React.createContext（）

    export { myContext };

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

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

    <myContext.provider value={{txtColor:this.state.color}}>
        <ArticleCom />
    </myContext.provider>

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

    <myContext.Consumer>
        {
            (item)=>{

                return  (<h2 style={{ color:item.txtColor }}>文章标题组件--{ item.txtColor }</h2>)
            }

        }

    </myContext.Consumer>

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中的<router-view>
    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 (
                <HashRouter>
                    <Switch>
                        <Route path='/' exact component={Home}/>

                          注：exact精确匹配

                        <Route path='/cate' component={Cate}/>
                        <Route path='/cart' component={Cart}/>
                        <Route path='/about' component={About}/>
                        <Redirect to="/" />
                    </Switch>
                </HashRouter>
            );
        }

    
    }
    
    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 ( 
                <div className="footerNav">
                    <NavLink exact to="/">首页</NavLink>

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

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