标签：content title 展台 Detail React params id 路由

        实现效果——点击展台1、展台2、展台3时，会显示同一个名为Detail路由组件，但是组件接收的值会不一样：

文件目录：

 Message>index.jsx:

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

export default class Message extends Component {
  constructor() {
    super();
    this.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}>
                  {/* 1.向路由组件传递params参数 */}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* 2.声明接收params参数 */}
        <Route path='/home/message/detail/:id/:title' component={Detail} />
      </div>
    )
  }
}

  Message>Detail>index.jsx:

import React, { Component } from 'react'

const DetailData = [
  { id: '01', content: '你好,01' },
  { id: '02', content: '你好,02' },
  { id: '03', content: '你好,03' },
]
export default class Detail extends Component {
  render() {
    //3.接收params参数
    const { id, title } = this.props.match.params//解构赋值
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id //如果某一项对象的id和我传过来的Id相等，findResult就等于这一项对象
    })
    return (
      <ul>
        <li>id:{id}</li>
        <li>title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }
}

标签：content,title,展台,Detail,React,params,id,路由
来源： https://blog.csdn.net/weixin_60463255/article/details/121584787

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。