如何在NextJS中找不到动态路由时重定向到其他页面

iklwldmw 于 2024-01-07 发布在其他

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

当用户进入一个不存在的动态路由时，我试图重定向用户。动态路由指向一个静态定义的字段数组中的字段。
这是我当前页面的代码：

import { fields } from "@/data/fields";

export function generateStaticParams() {
  return fields.map((field) => ({ slug: field.slug }));
}

const getField = async (slug) => {
  return fields.find((field) => field.slug === slug);
};

const FieldPage = async ({ params }) => {
  const field = await getField(params.field);

  return <>{field.name}</>;
};

export default FieldPage;

字符串
有一些if (!field) // redirect or throw error，我可以在我的代码中实现，使这一工作，这将是赞赏。目前，我已经尝试这样做在getField，但它抛出一个500错误在构建模式。

next.js

来源：https://stackoverflow.com/questions/77706349/how-to-redirect-to-another-page-when-a-dynamic-route-is-not-found-in-nextjs

1条答案

按热度按时间

qgzx9mmu1#

我刚刚尝试了NextJS的API，我找到了一个答案：

import { redirect } from "next/navigation";

// ...

const FieldPage = async ({ params }) => {
  const field = await getField(params.field);

  if (!field) redirect("/");

  return (
    <>
      <div>{field.name}</div>
      <div>{field.slug}</div>
    </>
  );
};

字符串
当在静态数据集中找不到字段时，redirect函数会立即将用户重定向回/页面。如果需要显示未找到（404）错误，您也可以使用NotFound重定向到文件系统中定义的not-found.js页面。希望这对某些人有所帮助！

赞(0）回复(0）举报 2024-01-07

我来回答

如何在NextJS中找不到动态路由时重定向到其他页面

1条答案

相关问题

热门标签

最新问答