React learning 20 (programmatic navigation)

Use the API on the this.props.history object to jump, forward, and backward the operation route. The specific method calls are as follows:

        this.props.history.push( )

        this.props.history.replace( )

        this.props.history.goBack( )

        this.props.history.goForward( )

        this.props.history.go( )

Code example:

Message.jsx

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:'001', title:'消息1'},
    {id:'002', title:'消息2'},
    {id:'003', 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((messageObj) => {
              return (
                <li key={messageObj.id}>
                {/* 向路由组件传递params参数 */}
                <Link to={`/home/message/detail/${messageObj.id}/${messageObj.title}`}>{messageObj.title}</Link>
                <button onClick= {() => this.pushShow(messageObj.id, messageObj.title)}>push查看</button>
                <button onClick= {() => this.replaceShow(messageObj.id, messageObj.title)}>replace查看</button>

                {/* 向路由组件传递search参数 */}
                {/* <Link to={`/home/message/detail/?id=${messageObj.id}&title=${messageObj.title}`}>{messageObj.title}</Link> */}
              
                {/* 向路由组件传递state参数 */}
                {/* <Link replace to={
   
   {pathname:'/home/message/detail',state:{id:messageObj.id,title:messageObj.title}}}>{messageObj.title}</Link> */}
              </li>
              )
            })
            }
        </ul>
        {/* 注册路由并声明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.forward}>前进</button>
          <button onClick= {this.back}>后退</button>
          <button onClick= {this.go}>前进或者是后退</button>
      </div>  
    )
  }
}

Detail.jsx

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

// let obj = {name:'tom', age:18} //name=tom&age=18
// console.log(qs.stringify(obj));

// let str = 'name=tom&agt=18'
// console.log(qs.parse(str));

const DetailData =[
  {id:'001', content:'你好，中国'},
  {id:'002', content:'你好，爸爸'},
  {id:'003', content:'你好，未来的自己'}
]
export default class Detail extends Component {
  render() {
    //接收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>
    )
  }
}