react-rouer路由

1、安装路由

npm install react-router-dom -S

2、路由的方式，都是组件

HashRouter: 带hash值的router        //相当于vue hash
HashRouter 可以用别名
需要这样写: HashRouter as Router
BrowserRouter: 不带hash值的router    //相当于vue history
Route 组件渲染的一种方式
Switch 
Redirect  路由重定向

注意：

• 1、路由的配置项必须在HashRouter、BrowserRouter内部做配置
• 2、HashRouter、BrowserRouter内部只能拥有一个子元素

3、路由配置项常用的组件

import React, { Component } from "react"
import { HashRouter as Router, BrowserRouter, Link, NavLink, Route} from "react-router-dom"
import Home from "./components/home"
import Movie from "./components/movie"
import Sort from "./components/sort"
import Mine from "./components/mine"
import HomeMovie from "./components/homeMovie"
export default class App extends Component{
    render () {
        return (
            
                

                    //componet 渲染方式
                    
                    
                    
                    
                    
                    //render 渲染方式 
                     {
                        return 
                    }} />
                     {
                        return 
                    }} />
                     {
                        return 
                    }} />
                     {
                        return 
                    }} />
                     {
                        return 
                    }} />
                    

                        

                            

                                首页
                            
                            

                                电影
                            
                            

                                分类
                            
                            

                                我的
                            
                        
                    
                
            
        )
    }
}

4、Route

作用：当路径匹配成功以后，渲染相对应的组件
属性：

• path: 组件所对应的路径
• component:需要渲染的组件 (组件渲染的方式)
• render:需要渲染的组件 (组件渲染的方式)
• exact:路径完全匹配 一般为false 父级在子页面不显示

5、路由跳转的方式
1、Link 路由跳转的方式
2、NavLink 路由跳转的方式(带当前位置名)
属性：

用的很少
activeStyle  
//写行内样式 
activeClassName  
//写class样式 

6、路由嵌套

7、路由渲染的方式

render:组件标签形式
1、不仅可以渲染组件 而且还可以渲染标签
2、 可以进行组件传值 以及逻辑判断
3、render渲染的组件默认是没有history location match 这三个属性的 如果需要使用 必须经过传递给组件
component:组价名称
1、只能渲染组件
2、凡是通过component进行组件渲染的 当前组件的props 中就有多三个属性（history location match）

8、路由传参

1、动态路由

在定义路由的时候，定义传递参数的key值
在路由跳转的时候 传递需要传递的值

{item.goodsName}

接收的时候通过this.props.match.params进行接收

2、query传值

1、根据query传值的方式进行路径的拼接 需要node中url模块的解析
2、根据对象的形式进行传值 to={{pathname:"路径"，query:{需要传递的值}}}

9、编程式导航

    this.props.history.goBack()
    this.props.history.goForward()
    this.props.history.push()
    this.props.history.replace()

10、withRouter

1、当前组件如果内部的this.props中没有history location match的时候可以通过withRouter进行包裹组件
然后进行导出组件 这样当前组件就会有路由的这几个属性

import {withRouter} from "react-router-dom"
........
export default withRoute(组件名称)

11、Switch

被Switch包裹的路由组件 在匹配的时候只会匹配一个

12、Redirect

重定向
from：从哪里来
to:到哪里去