react笔记_16(编程式路由导航)

编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退，而不用路由的<Link>和<NavLink>，但还是要注册路由

this.prosp.history.push()

this.prosp.history.replace()

this.prosp.history.goBack()

this.prosp.history.goForward()

this.prosp.history.go()

代码

1. Message.jsx

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

class Message extends Component {
 //数准备
 state = {
 messageArr:[
 {id:'01', title:'消息1'},
 {id:'02', title:'消息2'},
 {id:'03', title:'消息3'},
 ]
 }

 //push查看
 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,title})
 }

 //replaceShow查看
 replaceShow = (id, title)=>{
 //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,title})
 }
 //回退
 back = ()=>{
 this.props.history.goBack()
 }

 //前进
 forward = ()=>{
 this.props.history.goForward()
 }
 //
 go = ()=>{
 this.props.history.go(-2)
 }

 render() {
 const {messageArr} = this.state
 return (
 <div>
 <ul>
 {
 messageArr.map(item=>{
 return(
 <li key={item.id}>
 {/* 向路由组件传递params参数 */}
 {/*<Link to={`/home/message/detail/${item.id}/${item.title}`} children={item.title}/>*/}

 {/* 向路由组件传递search参数 */}
 {/*<Link to={`/home/message/detail?id=${item.id}&title=${item.title}`} children={item.title}/>*/}

 {/* 向路由组件传递state参数 */}
 <Link to={{pathname:'/home/message/detail', state:{id:item.id,title:item.title}}} children={item.title}/>
 <button onClick={()=>this.pushShow(item.id,item.title)}>push查看</button>
 <button onClick={()=>this.replaceShow(item.id,item.title)}>replace查看</button>
 </li>
 )
 })
 }
 </ul>
 <hr/>
 {/*声明接收params参数*/}
 {/*<Route path='/home/message/detail/:id/:title' component={Detail}/>*/}

 {/* search参数和state参数无需声明接收，正常注册路由即可 */}
 <Route path='/home/message/detail' component={Detail}/>
 <button onClick={this.back}>回退</button> 
 <button onClick={this.forward}>前进</button> 
 <button onClick={this.go}>go</button>
 </div>
 );
 }
}

export default Message;           

2. Detail.jsx

import React, {Component} from 'react';
import qs from 'querystring'
const DetailData = [
 {id:'01',content:'你好，中国'},
 {id:'02',content:'你好，尚硅谷'},
 {id:'03',content:'你好，未来的自己'}
]
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((detailObj)=>{
 return detailObj.id === id
 }) || {}
 return (
 <ul>
 <li>id:{id}</li>
 <li>title:{title}</li>
 <li>CONTENT:{findResult.content}</li>
 </ul>
 );
 }
}

export default Detail;           

react高质量笔记_15(路由传参)

react高质量笔记_14(Switch、多级路由)