React learning 19 (passing parameters to routing components)

params parameter

Routing links carry parameters

<Link to={`/home/message/detail/${messageObj.id}/${messageObj.title}`}>
{messageObj.title}</Link>

Register routes (declare parameters)

<Route path="/home/message/detail/:id/:title" component={Detail}/>

Receive parameters

const {id, title} = this.props.match.params

sample code

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'}
  ]}
  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>&nbsp;&nbsp;
                      </li>
            })
            }
        </ul>
        {/* 注册路由并声明参数 */}
        <Route path="/home/message/detail/:id/:title" component={Detail}/>
      </div>  
    )
  }
}

Detail.jsx

import React, { Component } from 'react'

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

search parameter

Routing links carry parameters

<Link to={`/home/message/detail/?id=${messageObj.id}&title=${messageObj.title}`}>{messageObj.title}</Link>

Register routing (no need to declare, just register normally)

<Route path="/home/message/detail" component={Detail}/>

Receive parameters

Remarks: The obtained search is a urlencode encoded string, which requires querystring

const {search} = this.props.location

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'}
  ]}
  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> */}

                {/* 向路由组件传递search参数 */}
                <Link to={`/home/message/detail/?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}/>
      </div>  
    )
  }
}

Detail.jsx

import React, { Component } from 'react'
// querystring不需要安装，是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' // {name:'tom', age: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))
    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>
    )
  }
}

State passing parameters

Routing links carry parameters

 <Link to={
   
   {pathname:'/home/message/detail',state:
{id:messageObj.id,title:messageObj.title}}}>{messageObj.title}</Link>

Register routing (no need to declare, just register normally)

<Route path="/home/message/detail" component={Detail}/>

Receive parameters

Remarks: Refresh can also retain parameters

const {id, title} = this.props.location.state

Summary of parameter passing methods

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'}
  ]}
  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> */}

                {/* 向路由组件传递search参数 */}
                {/* <Link to={`/home/message/detail/?id=${messageObj.id}&title=${messageObj.title}`}>{messageObj.title}</Link> */}
              
                {/* 向路由组件传递state参数 */}
                <Link 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}/>
      </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>
    )
  }
}