VIP32/react/react高阶/project1/src/pages/Product.jsx

import { useState } from "react";
import "./Product.css";
import { Link } from "react-router-dom";
const newList = [
  {
    id: 11,
    name: "孙悟空",
    desc: "我家住在花果山",
  },
  {
    id: 22,
    name: "胡图图",
    desc: "我家住在翻斗花园",
  },
  {
    id: 33,
    name: "喜羊羊",
    desc: "我家住在青青草原",
  },
];
function Product() {
  let [list] = useState(newList);

  return (
    <>
      <table border={1} cellPadding={15}>
        <thead>
          <tr>
            <th>姓名</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {list.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.desc}</td>
              <td>
                {/*页面跳转伴随着参数的传递 参数传递？ */}
                {/*1.路由传参 动态路由 跳转*/}
                {/* <Link to={{ pathname: `/product/detail/${item.id}` }}>去详情</Link> */}
                {/*  2.查询参数 */}
                {/* <Link to={`/product/detail?productId=${item.id}`}>去详情</Link> */}
                {/* <Link to={{pathname:'/product/detail',search:`?productId=${item.id}`}}>去详情</Link> */}
                {/* 3.history 中路由传参  state传参*/}
                <Link to={{pathname:"/product/detail"}} state={{productId: item.id}}>去详情</Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}
export default Product;