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 (
            <Router>
                <div>
                    //componet 渲染方式
                    <Route path="/home" component={Home}/>
                    <Route path="/movie" component={Movie}/>
                    <Route path="/home/movie" component={HomeMovie}/>
                    <Route path="/sort" component={Sort}/>
                    <Route path="/mine" component={Mine} />
                    //render 渲染方式 
                    <Route path="/home" exact renader={() => {
                        return <Home/>
                    }} />
                    <Route path="/movie" renader={() => {
                        return <HomeMovie />
                    }} />
                    <Route path="/home/movie" renader= {() => {
                        return <Movie />
                    }} />
                    <Route path="/sort" renader={() => {
                        return <Sort />
                    }} />
                    <Route path="/mine" renader={() => {
                        return <Mine />
                    }} />
                    <div>
                        <ul>
                            <li><NavLink to="/home">
                                <span>首页</span>
                            </NavLink></li>
                            <li><NavLink to="/movie">
                                <span>电影</span>
                            </NavLink></li>
                            <li><NavLink to="/sort">
                                <span>分类</span>
                            </NavLink></li>
                            <li><NavLink to="/mine">
                                <span>我的</span>
                            </NavLink></li>
                        </ul>
                    </div>
                </div>
            </Router>
        )
    }
}

4、Route

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

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

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

用的很少
activeStyle  
//写行内样式 <NavLink  to="/home" activeStyle={{color:"red"}}/>
activeClassName  
//写class样式 <NavLink  to="/home" activeClassName="NavLink-active"/>

6、路由嵌套

7、路由渲染的方式

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

8、路由传参

1、动态路由

在定义路由的时候，定义传递参数的key值 <Route path="/detail/:id/:name" component={Detail} />
在路由跳转的时候 传递需要传递的值 <h2 key={index}><Link to={item.path+"/"+item.goodsId+"/"+item.goodsName}>{item.goodsName}</Link></h2>

接收的时候通过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:到哪里去