使用动态路由将 404 重定向到 Nextjs 中的主页

Question

我试图将 404 页面重定向到 Nextjs 中的主页，但由于 next.config.js 中的规则，它不起作用。每隔一个 404 重定向到主页，但 /blog/ 路由下的任何内容都会转到默认的 Nextjs 错误页面。

例子:

/category-1/post1 重定向到 /blog/category-1/post1，如果它不存在，则呈现 404 页面但不重定向到主页。

这是我的 _error.js 文件和 404.js:

import { useEffect } from "react";
import { useRouter } from "next/router";

// export default function Custom404() ->in 404.js<-
export default function _error() {
  const router = useRouter();

  useEffect(() => {
    router.push("/");
  }, []);

  return null;
}

和我的 next.config.js 文件：

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
    ...oldBlogRedirectRules(),
    ]
}

// List of old categories
const blogCategoryUrlList = [
  "category-1",
  "category-2",
]

// Redirect old category and posts to /blog/[category]/[slug]
function oldBlogRedirectRules() {
  return blogCategoryUrlList.map((url) => {
    return {
      source: `/${url}/:slug*`,
      destination: `/blog/${url}/:slug*`,
      permanent: true,
    };
  });
}

还有/blog/[category]/[slug].js

中的代码

export default function Blog({ post }) {
  const router = useRouter();

  if (
    !router.isFallback &&
    ...otherConditions
  ) {
    return <ErrorPage statusCode={404} />;
  }

  return (
    <>
          {router.isFallback ? (
            <h1>Loading...</h1>
          ) : (
            ...whatever 
    </>
  );
}

Answer 1

更新： @hungdoansy 在评论中回答

自从我在 _error.js 中进行了更改后，我的印象是我不需要进行任何进一步的更改。

要解决此问题，只需从 404.js 文件导入函数：

import Custom404 from 'pages/404.js';

export default function Blog({ post }) {
  const router = useRouter();

  if (
    !router.isFallback &&
    ...otherConditions
  ) {
    return <Custom404 />;
  }

  return (
    <>
          {router.isFallback ? (
            <h1>Loading...</h1>
          ) : (
            ...whatever 
    </>
  );
}

使用动态路由将 404 重定向到 Nextjs 中的主页

Redirect 404 to homepage in Nextjs with dynamic routes

redirect

reactjs

next.js

dynamic-routing