【React 基础】向路由组件传递参数数据（params、search、state）

本文仅描述点击 Message 组件传递不同参数给下面组件的过程，需要demo完整代码可以留言。其他的基本知识不做过多赘述。

1、向路由组件传递 params 参数

1）导航区在 Message 组件中，在 Message 组件中定义了一个对象用来存储数据

  state = {
    messageArr:[
      {id:'01',title:'Message001'},
      {id:'03',title:'Message003'},
      {id:'06',title:'Message006'}
    ]
  }

用 map 遍历来动态生成导航区（此处用到了嵌套路由），/home/message/detail/${msgObj.id}/${msgObj.title} 传递 id 和 title

<ul>
  {
    messageArr.map((msgObj) => {
      return (
        <li key={msgObj.id}>
          <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
        </li>
      )
    })
  }
</ul>

2）Detail 组件声明接收参数 /home/message/detail/:id/:title

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

此时 Message 组件已经将参数传递给了 Detail 组件

3）Detail 组件显示参数

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

...

<ul>
  <li>ID:{id}</li>
  <li>TITLE:{title}</li>
  <li>CONTENT:{findResult.content}</li>
</ul>

4）完整代码
Message 组件：

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

import Detail from "./Detail"

export default class Message extends Component {
  state = {
    messageArr:[
      {id:'01',title:'Message001'},
      {id:'03',title:'Message003'},
      {id:'06',title:'Message006'}
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) => {
              return (
                <li key={msgObj.id}>
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        <Route path="/home/message/detail/:id/:title" component={Detail}/>
      </div>
    )
  }
}

Detail 组件：

import React, {Component} from 'react'

const DetailData = [
  {id:'01',content:'我爱你，中国'},
  {id:'03',content:'我爱你，中国33'},
  {id:'06',content:'我爱你，中国6666'}
]

export default class Detail extends Component {

  render() {
    console.log(this.props)
    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>
    )
  }
}

2、向路由组件传递 search 参数

1）Message 组件传递参数

<ul>
  {
    messageArr.map((msgObj) => {
      return (
        <li key={msgObj.id}>
          <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
        </li>
      )
    })
  }
</ul>

2）Detail 组件无需声明，正常注册即可

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

此时 Message 组件已经将参数传递给了 Detail 组件

3）Detail 组件显示参数，获取到的 search 是 urlencoded 编码字符串，需要借助 querystring 解析

const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))

...

<ul>
  <li>ID:{id}</li>
  <li>TITLE:{title}</li>
  <li>CONTENT:{findResult.content}</li>
</ul>

4）完整代码
Message 组件：

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

import Detail from "./Detail"

export default class Message extends Component {
  state = {
    messageArr:[
      {id:'01',title:'Message001'},
      {id:'03',title:'Message003'},
      {id:'06',title:'Message006'}
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) => {
              return (
                <li key={msgObj.id}>
                  <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    )
  }
}

Detail 组件：

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

const DetailData = [
  {id:'01',content:'我爱你，中国'},
  {id:'03',content:'我爱你，中国33'},
  {id:'06',content:'我爱你，中国6666'}
]

export default class Detail extends Component {

  render() {
    console.log(this.props)

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

3、向路由组件传递 state 参数

1）Message 组件传递参数，to 要写成一个对象

<ul>
  {
    messageArr.map((msgObj) => {
      return (
        <li key={msgObj.id}>
          <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
        </li>
      )
    })
  }
</ul>

2）Detail 组件无需声明，正常注册即可

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

此时 Message 组件已经将参数传递给了 Detail 组件

3）Detail 组件显示参数

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

...

<ul>
  <li>ID:{id}</li>
  <li>TITLE:{title}</li>
  <li>CONTENT:{findResult.content}</li>
</ul>

4）完整代码
Message 组件：

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

import Detail from "./Detail"

export default class Message extends Component {
  state = {
    messageArr:[
      {id:'01',title:'Message001'},
      {id:'03',title:'Message003'},
      {id:'06',title:'Message006'}
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) => {
              return (
                <li key={msgObj.id}>
                  <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    )
  }
}

Detail 组件：

import React, {Component} from 'react'

const DetailData = [
  {id:'01',content:'我爱你，中国'},
  {id:'03',content:'我爱你，中国33'},
  {id:'06',content:'我爱你，中国6666'}
]

export default class Detail extends Component {

  render() {
    console.log(this.props)

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

4、总结

1. params参数
   路由链接(携带参数)：<Link to=’/demo/test/tom/18’}>详情
   注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
   接收参数：this.props.match.params
2. search参数
   路由链接(携带参数)：<Link to=’/demo/test?name=tom&age=18’}>详情
   注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
   接收参数：this.props.location.search
   备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3. state参数
   路由链接(携带参数)：<Link to={{pathname:’/demo/test’,state:{name:‘tom’,age:18}}}>详情
   注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
   接收参数：this.props.location.state
   备注：虽然地址栏没有显示参数，但是刷新也可以保留住参数