React样式处理-组件嵌入数据-路由

一、React样式处理

行内样式

 这里双花括号不是vue的插值 ，行内样式在什么地方都是不推荐的

class类样式 ：

经常遇到需要动态绑定值 但是标签本身有一个设置好的样式，这个时候就需要用 模板字符串、

在${}里面写入动态的值 

二、组件嵌入数据

React组件内部通过this.props.children拿到嵌入的数据，例如:

或通过自定义属性嵌入需要的jsx： 

三、React路由

路由作用：实现单页应用(S singgle P page A application)

路由实现原理：利用hash或H5的history API实现路由

路由优点：实现历史回退，局部更新，当前地址状态不会改变

React路由 简介：

React路由由React社区来维护，FaceBook只提供了React

路由是由社区里的React爱好者写的 比较出名的  react router dom 

（1）、安装路由 

安装：npm i react-router-dom

（2）、路由具体使用

        index.js引入：

        import { BrowserRouter ,  HashRouter } from 'react-router-dom'

        app.js引入：

        import { Routes,  Route,  Link} from 'react-router-dom'        默认路由：

        就是子路由默认路由 Vue需要重定向一下

        React只需要 加上 Index 吧 path 删掉（用于子路由）

        404页面

        vue 404 path = “ ** ” 

        React 404 path = " * "

        React实现路由高亮（如底部tab点击后高亮）

    

         NavLink 引入后被点击的Tab会自动添加个 active 类名、直接给该类名添加样式！！！

希望以上对你有帮助~ 如有错误麻烦指出 感激不尽！！！