React 向路由组件传递参数

Posted 2021-09-03 咿呀咿呀哟

我们常用的传递参数方式为三种，通过例子展示一下三种方法是如何使用的：

传递参数的组件

import React, { Component } from \'react\'
import { Switch,Route,Link } from \'react-router-dom\'
import Detail from \'./Detail\'

export default class Message extends Component {
  state ={
    messageArr :[
      {id:\'01\',title:\'消息1\'},
      {id:\'02\',title:\'消息2\'},
      {id:\'03\',title:\'消息3\'}
    ]
  }
  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>
                </li>
              ) 
            })
          }
        </ul>
        <hr/>
        {/* 注册路由*/}
        <Switch>
          {/* 声明接收 params */}
          {/* <Route path=\'/home/message/detail/:id/:title\' component={Detail}></Route> */}
          
          {/* search 参数无需声明接收 */}
          {/* <Route path=\'/home/message/detail\' component={Detail}></Route> */}

          {/* state 参数无需声明接收 */}
          <Route path=\'/home/message/detail\' component={Detail}></Route>
        </Switch>
      </div>
    )
  }
}

接收参数的组件

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

const detailData = [
  {id:\'01\',content:\'你好，中国\'},
  {id:\'02\',content:\'你好，上海\'},
  {id:\'03\',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

    // 查找对应id 的 content
    const findResult = detailData.find((detailObj)=>{
      return detailObj.id === id
    })
    return (
      <div>
          <li>ID:{id}</li>
          <li>Title:{title}</li>
          <li>Content:{findResult.content}</li>
      </div>
    )
  }
}