nextjs中如何通过id动态路由

Question

我正在创建一个增删改查功能，我想要做的是，当用户单击编辑按钮时，它将路由到另一个页面，其中包含表中该行的详细信息。这是我的文件夹结构：

这是我在 table/index.jsx 中的代码：

"use client";

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

import Link from "next/link";

const Table = ({ data, columns, showSelectColumn, onDelete }) => {
  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);
    const idToDelete = dataTable[rowId].id; // Access the actual ID of the item
    onDelete(idToDelete);
  };

  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}>
              {/* {showSelectColumn && (
                    <th key={"select-header"} className="text-left p-2 border-b border-[#C3C6CF] text-[#1A1C1E] font-medium text-sm" style={{width: "10px"}}>
                      <input 
                        type="checkbox"
                      />
                    </th>
                  )} */}
              {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}>
              {/* {showSelectColumn && (
                <td
                  key={"select-column"}
                  className="p-2 border-b border-[#C3C6CF] text-[#1A1C1E] font-normal text-sm"
                >
                  <input
                    type="checkbox"
                    
                  
                  />
                </td>
              )} */}
              {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] text-[#1A1C1E] font-normal text-sm text-clip">
                <buttom onClick={() => console.log(row.original)}>
                  Click {row.id + 1}
                </buttom>
              </td> */}
              <td className="p-2 border-b border-[#C3C6CF] ">
                <div className="flex">
                
                  <Link href={`/${row.original.id}/edit`}>
                  <button
                    className="mr-2 px-3 py-1 bg-green-500 text-white rounded"
                  >
                    Edit
                  </button>
                  </Link>
                  <button
                    className="mr-2 px-3 py-1 bg-red-500 text-white rounded"
                    onClick={() => handleDelete(row.id)}
                  >
                    Delete
                  </button>
                </div>
              </td>
              {/* <td>
              </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;

在我的 onClick 编辑中，这是使用该行的 id 路由到编辑页面的正确方法吗？

Answer 1

 <Link href={`/${row.original.id}/edit`}>

如果你想使用它，你的文件夹结构应该是

[id]/编辑（这是正常工作）

我认为正确的方式

<Link href={

/edit/{row.original.id}

}>

和结构 编辑/[id]