javascript - 动态路由防止在 Next.js 中重定向到 404 页面

Question

我有一个 [pid].js我的 Next.js 项目中的文件。我还想实现一个自定义 404 页面，但问题是:我放了 404.js /pages 内的文件目录。如果我删除我的 [pid].js文件，404页面工作得很好。但是，如果我保留我的 [pid].js文件中，第一个请求进入 pids，并且由于 url 与 pids 中定义的任何页面都不匹配，我得到一个错误。我应该从 pid 显式返回我的 404 组件吗？这是一个好习惯吗？
这是代码(现在不重定向到 404 页面):[pid].js

const Pid = ({ url, props }) => {
    const getPages = () => {
        let component = null;
        switch (url) {
            case 'checkout':
                component = <CheckoutPage {...props} />;
                break;
            //other switch cases...
            default:
                //should I return my 404 component here?
                component = <DefaultPage {...props} />;
        }
        return component;
    };

    return getPages();
};

export async function getServerSideProps(context) {
    const res = await getReq(`/getUrl`, 'content', context);

    switch (res.url) {
        case 'checkout': {
            return {
                props: {
                    url: res.url,
                    props: {
                    ... //my other props
                    },
                },
            };
        }
        default:
            return {
                props: null,
            };
    }
}

Pid.propTypes = {
    url: PropTypes.string.isRequired,
};

export default Pid;

Answer 1

从 NextJS 10 开始，您不必显式返回 404 页面，这要归功于新标志 notFound: true .
您可以在 getStaticProps 使用它和 getServerSideProps自动触发默认 404 页面或您自己的自定义 404 页面。
从 NextJS Docs 查看这些示例。

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // will be passed to the page component as props
  }
}

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

文档引用

notfound Support on Nextjs10

notfound on getStaticProps

notfound on getserversideprops

Custom 404 Page