react学习---编程式路由导航

本文主要是介绍react学习---编程式路由导航，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

                    借助this.prosp.history对象上的API对操作路由跳转、前进、后退                             -this.prosp.history.push()                             -this.prosp.history.replace()                             -this.prosp.history.goBack()                             -this.prosp.history.goForward()                             -this.prosp.history.go()  

import React, { 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)=>{
        //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})
    }

    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})
        
    }

    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((msgObj)=>{
                            return (
                                <li key={msgObj.id}>

                                    {/* 向路由组件传递params参数 */}
                                    {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

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

                                    {/* 向路由组件传递state参数 */}
                                    <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

                                    &nbsp;<button onClick={()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
                                    &nbsp;<button onClick={()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr/>
                {/* 声明接收params参数 */}
                {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

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

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

                <button onClick={this.back}>回退</button>&nbsp;
                <button onClick={this.forward}>前进</button>&nbsp;
                <button onClick={this.go}>go</button>

            </div>
        )
    }
}

接收参数

import React, { 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((detailObj)=>{
            return detailObj.id === id
        }) || {}
        return (
            <ul>
                <li>ID:{id}</li>
                <li>TITLE:{title}</li>
                <li>CONTENT:{findResult.content}</li>
            </ul>
        )
    }
}

 

这篇关于react学习---编程式路由导航的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！