react从0到1的探索记录04

18、React中的路由

React中路由的基本使用

• 在react中使用路由首先需要安装react的路由模块 npm install react-router-dom -S。
• 在项目主入口文件index.js或根组件处导入。

import {HashRouter,Route,Link} from 'react-router-dom'

HashRouter:表示路由的根容器，将来所有跟路由相关的内容都需要包裹在HashRouter里面，一个网站中只需要一个HashRouter就好。
Route 路由规则，有两个重要的属性 path和component。
Link表示路由的连接，相当于Vue中的
使用实例

index.js

import React from 'react'
import ReactDom from 'react-dom'
import App from '@/components/App'


ReactDom.render(

    
,document.getElementById('app'))

根组件

import React from 'react'
import Home from '@/components/Home'
import Movie from '@/components/Movie'
import About from '@/components/About'

//在react中使用路由需要安装路由模块 npm install react-router-dom -S,之后需要在主入口将其导入
import {HashRouter,Route,Link} from 'react-router-dom'
//HashRouter表示路由的根容器，将来所有跟路由相关的内容都需要包裹在HashRouter里面，一个网站中只需要一个HashRouter就好
//Route 路由规则，有两个重要的属性 path和component
//Link表示路由的连接，相当于Vue中的

export default class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {}
    }
    render(){
        //用HashRouter来包裹根组件, 为当前网站启用路由,在HashRouter中只能有唯一一个根元素，如此处的div
        return 
            

                
我是网站App的根组件
                首页  
                电影  
                我的  
                

                {/* 添加路由规则,path表示匹配的路由，component表示需要展示的组件*/}
                {/* 在Vue中有这样的路由标签，专门用来放匹配到的路由组件，在react中，没有router-view，而是直接使用Route标签来当做占位符。 */}
                {/* react中的Route有两种身份，首先是路由规则，其次还是占位符 */}
                {/* 这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配 */}
                
                
                
            
        
    }
}

其他组件
以Home组件为例

import React from 'react'

export default class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {}
    }
    render(){
        return 

            
我是首页
        
    }
}

路由传参，匹配路由参数

在路由规则中向movie组件中传参如下

import React from 'react'
import Home from '@/components/Home'
import Movie from '@/components/Movie'
import About from '@/components/About'

//在react中使用路由需要安装路由模块 npm install react-router-dom -S,之后需要在主入口将其导入
import {HashRouter,Route,Link} from 'react-router-dom'
//HashRouter表示路由的根容器，将来所有跟路由相关的内容都需要包裹在HashRouter里面，一个网站中只需要一个HashRouter就好
//Route 路由规则，有两个重要的属性 path和component
//Link表示路由的连接，相当于Vue中的

export default class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {}
    }
    render(){
        //用HashRouter来包裹根组件, 为当前网站启用路由,在HashRouter中只能有唯一一个根元素，如此处的div
        return 
            

                
我是网站App的根组件
                首页  
                电影  
                我的  
                

                
                {/* 添加路由规则,path表示匹配的路由，component表示需要展示的组件*/}
                {/* 在Vue中有这样的路由标签，专门用来放匹配到的路由组件，在react中，没有router-view，而是直接使用Route标签来当做占位符。 */}
                {/* react中的Route有两种身份，首先是路由规则，其次还是占位符 */}
                {/* 默认情况下，react中的路由是模糊匹配的，如果路由可以部分匹配成功，就会展示这个路由对应的组件 */}
                {/* 这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配 */}
                {/* 在路由中想要传递参数可以在匹配规则中使用:修饰符，表示这个位置匹配到的是参数 */}
                {/* 这里添加的replace的作用去除警告  Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack */}
                
                
                
            
        
    }
}

Movie组件中获取路由中传递的参数

import React from 'react'

export default class Movie extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            routeParams:props.match.params
        }
    }
    render(){
        // 如果想要在路由规则中提取匹配的参数进行使用可以使用this.props.match.params来访问
        console.log(this.props.match.params)
        return 

            
我是电影 参数为{this.state.routeParams.type}---{this.state.routeParams.id} 
        
    }
}

React中antd的使用

• antd是什么
  antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
• 为React项目启用Ant Design组件
  1、安装 npm install antd -S
  2、在主入口文件引入antd的样式表 import 'antd/dist/antd.css
  3、在想使用antd组件的react组件中将antd组件导入
  4、将导入的antd组件以标签的方式丢到使用的位置即可
• antd组件的按需导入
  如果在引用第三方框架的时候，将整个css全部引入进来，虽然是可以的，但是打包之后的文件体积显得过大
  有时候我们只引用了某个组件，那么这时再将整个的样式表全部引入就显得不是那么合适，所以可以通过配置将所需的样式按需自动加载,同时也避免了在主入口文件引入样式表。
  实现按需导入的方式
  1、安装用于按需加载组件代码和样式的 babel 插件。npm install babel-plugin-import
  2、在.babellrc中的plugins中添加如下配置 ["import", { "libraryName": "antd", "style": "css" }]或者在babel-loader中配置
  在.babellrc中配置如下

{
"presets":["env","stage-0","react"],
"plugins":["transform-runtime",["import", { "libraryName": "antd", "style": "css" }]]
}

React中使用antd组件，并实现按需加载的实例

index.js

import React from 'react'
import ReactDom from 'react-dom'
import Appone from '@/components/Appone'
//导入Ant-Design的样式表
// import 'antd/dist/antd.css'
//如果在引用第三方框架的时候，像上面这样将整个css全部引入进来，虽然是可以的，但是打包之后的文件体积显得过大
//有时候我们只引用了某个组件或者ui，那么这时再将整个的样式表全部引入就显得不是那么合适，所以可以通过配置将所需的样式按需自动加载
//同时也避免了在主入口文件引入样式表

//实现按需加载的方式
//1、安装用于按需加载组件代码和样式的 babel 插件npm install babel-plugin-import
//2、在.babellrc中的plugins中添加如下配置 ["import", { "libraryName": "antd", "style": "css" }]


ReactDom.render(

    
,document.getElementById('app'))

Appone.jsx

import React from 'react'
import locale from 'antd/es/date-picker/locale/zh_CN'
import {DatePicker} from 'antd'

export default class Appone extends React.Component{
    constructor(props){
        super(props)
        this.state = {}
    }
    render(){
        return 

            
使用ant-design
            
        
    }
}