编程式路由导航

5.编程式路由导航

1.push和replace模式

{/* 路由模式改成replace替换 , 默认为push堆栈 */}
<Link replace to={{pathname: '/home/message/detail', state:{id:msgObj.id, title: msgObj.title}}}>{msgObj.title}</Link>

2.编程式路由导航

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'},
        ]
    }

    pushShow = (id, title) => {
        // 编写一段代码，让其 实现跳转到Detail组件，且为push跳转
        // 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 = (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,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>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.go}>GO</button>
            </div>
        );
    }
}

export default Message;

3.withRouter的使用

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


class Header extends Component {

    back = () => {
        this.props.history.goBack()
    }

    forward = () => {
        this.props.history.goForward()
    }

    go = () => {
        this.props.history.go(2)
    }
    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>
        );
    }
}

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