标签：传参 search const title react state msgObj id

Message/index.jsx

import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Detail from "./Detail";
class News extends Component {
  state = {
    messageArr: [
      { id: "1", title: "消息1" },
      { id: "2", title: "消息2" },
      { id: "3", title: "消息3" },
      { id: "4", title: "消息4" },
    ],
  };
  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> */}
                &nbsp;&nbsp;
                {/*向路由组件传递state参数*/}
                <Link
                  to={`/home/message/detail`}
                  state={{ id: msgObj.id, title:msgObj.title}}
                >  {msgObj.title}</Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <Routes>
          {/**声明接收params参数 */}
          {/* <Route path="detail/:id/:title" element={<Detail />}></Route> */}

          {/**search参数无需声明接收，正常注册路由即可 */}
          {/* <Route path="detail" element={<Detail />}></Route> */}

          {/**向路由组件chuandistate参数*/}
          <Route path="detail" element={<Detail />}></Route>
        </Routes>
      </div>
    );
  }
}

export default News;

Detail/index.jsx

import React from "react";
import { useLocation} from 'react-router-dom';
import qs from 'querystring'

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

let str='carName=奔驰&price=1999999'
console.log(qs.parse(str));

const detailData = [
  { id: "1", content: "你好，中国",title:"苹果" },
  { id: "2", content: "你好,小可爱",title:"苹果" },
  { id: "3", content: "你好,未来的你",title:"苹果" },
  { id: "4", content: "你好,未来的你s",title:"苹果" },
];

const Detail = () => {
  //接收params参数
  // const params = useParams();
  // const findResult=detailData.find((detailObj)=>{
  //   return detailObj.id===params.id
  // })

  //接收search参数
  // const {search}=this.props.location;
  // const {id,title}=qs.parse(search.slice(1));

  // const { search } = useLocation();
  // const {id,title}=qs.parse(search.slice(1));

  //接收state参数
  const stateparams=useLocation();
  const {id,title}=stateparams.state;

  const findResult=detailData.find((detailObj)=>{
    return detailObj.id===id
  })||{}
  return (
    <div>
      <ul>
        <li>ID:{findResult.id}</li>
        <li>TITLE:{findResult.title}</li>
        <li>CONTENT:{findResult.content}</li>
      </ul>
    </div>
  );
}

export default Detail;

标签：传参,search,const,title,react,state,msgObj,id
来源： https://blog.csdn.net/honeycandys/article/details/122275636

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