React 编程式路由与withRouter

👁 2021-02-22

了解什么是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()

1 编程式路由

向路由组件传递参数有三种: params参数,search参数,state参数
Message.jsx组件
使用编程式路由Link组件传递参数类型需要与Route组件声明接收参数类型匹配，在Detail组件中接收数据也需要仔细查看参数。

import React, { Component } from 'react';
import {Link,Route} from 'react-router-dom'
import Detail from './Detail/Detail'
class Message extends Component {
    state = {
        messageinfo:[{
            id: 1,
            title: "me1",
            content: "lll"
        },
        {
            id: 2,
            title: "me2",
            content: "yyy"

        },{
            id: 3,
            title: "me3",
            content: "hhh"
        }]
    }
    showReplace = (id,title,content)=>{
        //编程式路由
        this.props.history.replace(`/home/message/detail/${id}/${title}/${content}`)
        // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}&content=${content}`)
        // this.props.history.replace(`/home/message/detail`,{id:id,title:title,content:content})
    }
    showPush= (id,title,content)=>{
        //编程式路由
        this.props.history.push(`/home/message/detail/${id}/${title}/${content}`)
        // this.props.history.push(`/home/message/detail?id=${id}&title=${title}&content=${content}`)
        // this.props.history.push(`/home/message/detail`,{id:id,title:title,content:content})
    }
    render() {
        const {messageinfo} = this.state
        return (
            <div>
                <ul>
                    {
                        messageinfo.map((item)=>{
                            return (<li key={item.id}>
                                {/* 向路由组件传递params参数 */}
                                <Link to={`/home/message/detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link>
                                &nbsp;&nbsp;<button onClick ={()=>{this.showPush(item.id,item.title,item.content)}}>push查看</button>
                                &nbsp;&nbsp;<button onClick ={()=>{this.showReplace(item.id,item.title,item.content)}}>replace查看</button>
                            </li>)
                        })
                    }
                </ul>
                <hr/>
                <div>
                {/* 声明接收params参数 */}
                    <Route path="/home/message/detail/:id/:title/:content" component={Detail}></Route>
                </div>
            </div>
        );
    }
}

export default Message;

接收传递的参数数据

1.params参数

class Detail extends Component {
    render() {
        //接收params参数
        const {match} = this.props
        return (
            <div>
                <ul>
                    <li>ID:{match.params.id}</li>
                    <li>title:{match.params.title}</li>
                    <li>content:{match.params.content}</li>
                </ul>
            </div>
        );
    }
}

2.search参数

class Detail extends Component {
    render() {
        //接收search参数
        console.log(this.props)
        const {search} = this.props.location
        const obj = qs.parse(search)  //将字符串解析对象
        return (
            <div>
                <ul>
                    <li>ID:{obj.id}</li>
                    <li>title:{obj.title}</li>
                    <li>content:{obj.content}</li>
                </ul>
            </div>
        );
    }
}

3.state参数

class Detail extends Component {
    render() {
        //接收state参数
        console.log(this.props)
        const {state} = this.props.location
        return (
            <div>
                <ul>
                    <li>ID:{state.id}</li>
                    <li>title:{state.title}</li>
                    <li>content:{state.content}</li>
                </ul>
            </div>
        );
    }
}

3 withRouter的使用

假设在Head组件中，可以对页面进行调转，可是目前Head组件是一个一般组件，不是路由组件，那么他就不具备路由组件特有的API，如何解决呢？
withRouter可以接受一个一般组件，使之含有路由组件的特有API

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

class Head extends Component {
    forward=()=>{
        this.props.history.goForward()
    }
    back=()=>{
        this.props.history.goBack()
    }
    render() {
        console.log('Head',this.props)
        return (
            <div>
                <h1 className="title1">router demo</h1>
                &nbsp;&nbsp;<button onClick={this.forward}>前进</button>
                &nbsp;&nbsp;<button onClick={this.back}>回退</button>
            </div>
        )
    }
}

export default withRouter(Head)   
// withRouter可以接受一个一般组件，使之含有路由组件的特性