javascript Next.js 13应用目录中的动态路由抛出404 Not Found错误

kx1ctssn 于 2023-03-21 发布在 Java

关注(0)|答案(1)|浏览(261)

我使用Next.js 13和TypeScript创建了一个简单的to-do应用程序，创建了一个包含id字符串和name字符串的对象数组，然后Map列表并在Link元素中显示列表名称，其中href设置为/listId/${list.listId}。

//父页面：

<div className='flex flex-col gap-2 py-2 pb-4'>
          { allLists.length > 0 && allLists.map((list: IList, index: number) => (
              <Link key={index} href={`/listId/${list.listId}`}
                className='border border-dashed border-gray-500 text-gray-800 px-3 py-1 rounded-lg'>
                <p>{ list.listName }</p>
              </Link>
          ))}

我需要导航到特定的页面并获取该页面上的ID。但不幸的是，在预取和在listId页面上导航时，我得到了404错误...
我不是TypeScript的Maven，这是我第一次使用Next.js 13应用程序目录项目。
// ListId页面（服务器组件）：

interface IParams {
  listId: string
}

const ListNamePage: FC<IParams> = ({ listId }): ReactElement => {

  const router = useRouter();
  const { listName } = router.query;
  console.log(listName);
  
    
  return (
    <div>ListNamePage</div>
  )
}

export default ListNamePage

JavaScript

来源：https://stackoverflow.com/questions/75783445/dynamic-routing-in-next-js-13-app-directory-throwing-404-not-found-error

1条答案

按热度按时间

krcsximq1#

你犯了两个错误。第一个，导致404错误的，是你的href。因为你定义了你的动态路由文件夹，它应该是/839402...而不是/listId/839402...，如下所示：

<Link
  key={index}
  href={`/${list.listId}`}
  className="border border-dashed border-gray-500 text-gray-800 px-3 py-1 rounded-lg"
>
  <p>{list.listName}</p>
</Link>

第二个是你试图在页面上获取listId的方式;它应该如下所示。注意我简化了类型：

interface IProps {
  params: {
    listId: string;
  };
  searchParams: {};
}

const ListNamePage = ({ params }: IProps) => {
  console.log(params.listId);

  return <div>ListNamePage</div>;
};

export default ListNamePage;

赞(0）回复(0）举报 2023-03-21

我来回答

javascript Next.js 13应用目录中的动态路由抛出404 Not Found错误

1条答案

相关问题

热门标签

最新问答