React路由的理解与使用

1.什么是路由？

1.一个路由就是一个映射关系（key:value）
2.key为路径value可能是function或者component

2.路由的分类

???? 前端路由：
1.浏览器路由，value是component，用于展现页面内容
2.注册前端路由：
3.工作过程:当浏览器的path变为/test时，当前路由组件就变为Test

后端路由：
	1.理解:value是function，用来处理客户端提交的请求
	2.注册路由:router.get(path,function(req,res))
	3.工作过程:当node接受到一个请求时，根据请求路径，找到匹配的路由，调用路由中的函数来处理请求，返回响应数据

3.React-router-dom的理解

1.react的一个插件库
2.专门来实现一个SPA应用
3.基于react的项目基本都会用到此库

4.react-router-dom相关API

 4.1内置组件
 	1.<BrowserRouter>    使用h5提供的historyAPI来保持UI和url的同步
 	2.<HashRouter>      使用window.loaction.hash（即url的hash部分）来实现UI和url的同步
 	3.<Route>  路由匹配， 匹配路径，导入对应组件
 		参数:
 		exact，值为bool类型，值为true是严格匹配，为false时正常匹配，默认为false
 	4.<Redirect>路由重定向
 	5.<Link>  路由导航链接，编译后实质为a标签
 	6.<NavLink>Link的增强版，在Link的基础上增加了默认样式，属性名activeClassName，默认值为active，字符类型
 	7.<Switch>包裹路由导航链接，Link或者Navlink，当匹配到一个Route时，就不会向下寻找，提高效率

???? render方法只有在路由匹配时才出发
???? children方法不管路由是否匹配都会触发

4.2路由组件对象和withRouter函数
	1.history对象
		push(location)
		replace(location)
		goBack()
		goForward()
		go(n)
		
	2.match对象
		params对象
		path
		url
		isExact
		
	3.location对象
		pathname   同window.location.pathname
		search     同window.location.search
		state		不同于react中的state，是捆绑地址上的state对象
		key          唯一ID
		hash        
		
	4.withRouter函数
	给非路由组件添加添加路由组件所具有的API,
	withRouter的返回值是一个新组件

​????

5.编程式路由导航，路由传参

​???? 传递参数

import {Component} from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail';
 

export default class Message extends Component{
    state = {
        messageArr:[
            {id:'01',title:'消息1'},
            {id:'02',title:'消息2'},
            {id:'03',title:'消息3'}
        ]
    }
    replaceShow  =(id,title)=>{
        // 编写一段代码，让其实现跳转到Detail组件，且为replace跳转
        // replace跳转+携带params参数
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)

        //replace跳转+携带search参数 
        // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

        //replace跳转+携带state参数 
        this.props.history.replace(`/home/message/detail`,{id:id,title:title});


    }

    pushShow = (id,title)=>{
        // push跳转+携带params参数
        // this.props.history.push(`/home/message/detail/${id}/${title}`);

        // push跳转+携带search参数
        // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`);

        //push跳转+携带state参数 
        this.props.history.push(`/home/message/detail`,{id:id,title:title});
    }

    back = ()=>{
        this.props.history.goBack();
    }
    forward  = ()=>{
        this.props.history.goForward();
    }
    go = ()=>{
        this.props.history.go(-2);
    }

    render(){
         const {messageArr:arr} = this.state;
        return(
            <div>
               <ul>
                   {
                      arr.map((msgObj)=> { 
                        return (
                            <li key={msgObj.id}> 
                            {/* 向路由组件传递params参数 */}
                                {/* <Link  to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> &nbsp; &nbsp; */}
                            
                            {/* 向路由组件传递search参数 */}
                            {/* <Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}
                           
                            {/* 向路由组件传递state参数 */}
                            <Link replace to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                            
                            <button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
                            <button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
                            </li>
                        )
                       })
                   }
               </ul>
               <hr />
                   {/* 声明接受params参数 */}
                   {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}

                   {/* search参数无需声明接收,正常接收即可 */}
                   {/* <Route path="/home/message/detail" component={Detail}></Route> */}

                   {/* state参数无需声明接收,正常接收即可 */}
                   <Route  path="/home/message/detail" component={Detail}></Route>

                   <button onClick={this.back}>回退</button>
                   <button onClick={this.forward}>前进</button>
                   <button onClick={this.go}>GO</button>
            </div>
        )
    }
}

​???? 接受参数

import {Component} from 'react'
// import  qs  from 'querystring'

const detailData = [
    {id:'01',content:"你好，杭州"},
    {id:'02',content:"你好，苏州"},
    {id:'03',content:"你好，未来的自己"},
]

export default class Detail extends Component{
    render(){
        console.log(this.props);
        // 接收params参数
        // const {id,title} = this.props.match.params;

        // 接收search参数
        // const {search} = this.props.location
        // const {id,title} = qs.parse(search.slice(1));

        // 接收state参数
        const {id,title} = this.props.location.state || {}

        const findResult =detailData.find((detailObject)=>{
                return detailObject.id === id;
        })
        return(
           <ul>
              <li>ID:{id}</li>
              <li>Title:{title}</li> 
              <li>Content:{findResult.content}</li> 
           </ul>
        )
    }
}

6.withRouter的使用

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

 class Header extends Component {
    back = ()=>{
        console.log(this);
        this.props.history.goBack();
    }
    render() {
        return (
            <div className="page-header">
                <h2>React Router Demo</h2>
                <button onClick={this.back}>回退</button>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.go}>go</button>
            </div>
            
            )
    }
}

export default withRouter(Header)
// withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
// withRouter的返回值是一个新组件