传递数据对象动态路由nextjs

Question

我在另一条路线中传递对象时遇到此错误。我的目标是，当单击编辑按钮时，我将被路由到编辑页面，并将该行的数据传递到编辑页面。当我尝试仅传递 id 时，它会起作用： router.push(Create/${id}/edit) 在 nextjs 文档中，它说如果传递对象

useuseSearchParams() 但是你能帮我理解使用这个的时候吗？

"use client";

import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  getPaginationRowModel,
} from "@tanstack/react-table";
import { useMemo } from "react";

import { useRouter } from 'next/navigation';

const Table = ({ data, columns, showSelectColumn, onDelete }) => {
  const router = useRouter();
  const dataTable = useMemo(() => data, [data]);

  const table = useReactTable({
    data: dataTable,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

  const totalPages = table.getPageCount();

  const currentPage = table.pageIndex + 1; // pageIndex is zero-based

  const pageNumbers = [];
  for (let i = 1; i <= totalPages; i++) {
    pageNumbers.push(i);
  }

  const handleDelete = (rowId) => {
    console.log(dataTable[rowId].id);
    console.log(dataTable[rowId])
    const idToDelete = dataTable[rowId].id; // Access the actual ID of the item
    onDelete(idToDelete);
  };

  const handleEdit = (rowId) => {
    const id = dataTable[rowId].id;
    router.push({
      pathname: `Create/${id}/edit`,
      query: {id: id, ...dataTable[rowId]}
    })
    // router.push(`Create/${id}/edit`)
  }

  return (
    <div className="p-5">
      <table className="text-sm text-left text-gray-500 dark:text-gray-400 table border-collapse w-full">
        <thead className="text-xs text-gray-700 uppercase bg-gray-500 dark:bg-gray-700 dark:text-gray-400">
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
          
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  className="text-left p-2 border-b border-[#C3C6CF] text-white font-medium text-sm text-nowrap uppercase"
                >
                  {flexRender(
                    header.column.columnDef.header,
                    header.getContext()
                  )}
                </th>
              ))}
              <th
                key={"action-header"}
                className="text-left p-2 border-b border-[#C3C6CF]  text-white text-sm font-semibold uppercase"
                style={{ width: "8px" }}
              >
                Action
              </th>
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
            
              {row.getVisibleCells().map((cell) => (
                <td
                  key={cell.id}
                  className="p-2 border-b border-[#C3C6CF] text-[#1A1C1E] font-normal text-sm text-clip"
                >
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
          
              <td className="p-2 border-b border-[#C3C6CF] ">
                <div className="flex">
                  <button
                    className="mr-2 px-3 py-1 bg-green-500 text-white rounded"
                    // onClick={() => router.push(`Create/${row.original.id}/edit`)}
                    onClick={() => handleEdit(row.id)}
                  >
                    Edit
                  </button>
  
                  <button
                    className="mr-2 px-3 py-1 bg-red-500 text-white rounded"
                    onClick={() => handleDelete(row.id)}
                  >
                    Delete
                  </button>
                </div>
              </td>
         
            </tr>
          ))}
        </tbody>
      </table>

      {/*  for pagination*/}

      <div className="flex justify-between pt-5">
        <button
          onClick={() => table.previousPage()}
          className="px-3 py-1 mx-1 rounded transition-colors bg-white text-black font-bold"
        >
          Previous
        </button>

        {pageNumbers.map((pageNumber) => (
          <button
            key={pageNumber}
            onClick={() => table.setPageIndex(pageNumber - 1)} // pageIndex is zero-based
            disabled={pageNumber === currentPage}
          >
            {pageNumber}
          </button>
        ))}

        <button
          className="px-3 py-1 mx-1 rounded transition-colors bg-white text-black font-bold"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next Page
        </button>
      </div>
    </div>
  );
};

export default Table;

Answer 1

尝试自己创建参数，但首先记录它们以确保它们确实获得了您希望它们拥有的数据。那会是这样的：

 const handleEdit = (rowId) => {
    const id = dataTable[rowId].id;
    let params = new URLSearchParams()
    params.set("id", id)
    params.set("someOtherProperty", dataTable[rowId].thatOtherProperty)
    const pathname = `/Create/${id}/edit?${params.toString()}` // IMPORTANT: Note the leading slash here.
    console.log(pathname) // Remove this once you're sure you're getting the data that you want.
    router.push(pathname)
  }