javascript JS Dynamic Routing在坏路由上返回200

li9yvcax 于 2024-01-05 发布在 Java

关注(0)|答案(2)|浏览(107)

我在Next JS中使用App Router，Strapi作为我的CMS。当我在Postman中查询API时，我得到了预期的结果。没有对应slugs的错误路由返回404，只有带有slugs的路由返回200。
然而，在我的Next JS前端中，所有路由都解析为200，如果没有slug，它只会返回一个空的数据数组。我可以检查空数组并推送404错误页面，但这似乎是一个坏主意，原因有很多。
我似乎找不到任何正确的方法来做到这一点。This answer seems to be out of date with the old pages router。我如何返回一个404在一个坏的路由与动态路由与应用路由器的方法？
下面是我当前的前端代码，文件夹结构为app/works/[slug]/page.js

'use client'
import axios from 'axios';
import useSWR from 'swr';
import { useRouter } from 'next/navigation';

const fetcher = (url) => axios.get(url).then((res) => res.data.data);

export default function SingleWork({ params }) {
    const router = useRouter();
    const { slug } = params;
    const { data, error, isLoading } = useSWR(
        `http://localhost:1337/api/works?filters[slug][$eq]=${slug}&populate=*`,
        fetcher
    );

    if (error) {
        return (
            <div>Failed to load</div>
        )
    }

    if (isLoading) {
        return (
            <div>Loading...</div>
        )
    };

    if (!data[0]) {
        router.push("/404")
    } else {
        return (
            <div>My Post: {JSON.stringify(data)}</div>
        )
    }
}

字符串

JavaScript

来源：https://stackoverflow.com/questions/76871399/next-js-dynamic-routing-returns-200-on-bad-routes

2条答案

按热度按时间

k5ifujac1#

从SingleWork组件中删除自定义404处理。您将在getServerSideProps函数中处理它。
创建一个pages/app/works/[slug].js文件，包含以下内容：

import axios from 'axios';

export default function SingleWork({ data }) {
  return (
    <div>My Post: {JSON.stringify(data)}</div>
  );
}

export async function getServerSideProps({ params }) {
  const { slug } = params;

  try {
    const response = await axios.get(
      `http://localhost:1337/api/works?filters[slug][$eq]=${slug}&populate=*`
    );
    const data = response.data.data[0];

    if (!data) {
      return {
        notFound: true, // This will trigger a 404 error
      };
    }

    return {
      props: { data },
    };
  } catch (error) {
    console.error('Error fetching data:', error.message);
    return {
      props: {},
    };
  }
}

字符串
通过使用getServerSideProps函数，您可以在服务器端执行数据获取并正确处理404错误条件。如果未找到数据，则notFound属性设置为true，导致404错误响应。否则，获取的数据将作为props传递给组件。

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

wlsrxk512#

要使Next.js为动态参数与定义的路由不匹配的路由返回404状态，可以在布局或页面文件中设置dynamicParams。
导出常量动态参数= false // true|错的，
true（预设值）：generateStaticParams中未包含的动态区段会视需要产生。
false：generateStaticParams中不包含的动态段将返回404。
检查此参考

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

我来回答

javascript JS Dynamic Routing在坏路由上返回200

2条答案

相关问题

热门标签

最新问答