如果参数不存在如何重定向 Next.JS

Question

我有一个页面可以有 2 个参数之一。电子邮件和哈希值（如果不存在）我想重定向用户。

/confirm-email?email=user@email.com

我试过以下方法：

const router = useRouter();
const { email, hash } = router.query;

useEffect(() => {
  if (!email && !hash) {
    router.push('/');
  } else if (hash) {
    // Do stuff
  }
}, [email, hash, router]);

但是第一次呈现它们时的问题是undefined，即使哈希或电子邮件参数存在，用户也会被重定向。

我该如何解决这个问题？有什么建议吗？

Answer 1

if (hash)

看起来没有必要。

和

query: Object - 解析为对象的查询字符串。如果页面没有数据获取需求，它在预渲染期间将是一个空对象。默认为 {}

引用自https://nextjs.org/docs/api-reference/next/router

我想这就是问题所在。

参数是 Router.query

中的文件名

例如：

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

对于pages/morepages/[pid].js

中的文件[pid].js

或者，也许，要使用 2 个参数选项，您需要转到同时使用这两个参数的网站页面。所以他们之间必须有一个标签。

如“website/emial/hash”

Answer 2

经过一些研究。我发现最好检查 getServerSideProps()

中是否存在参数

export async function getServerSideProps({ query }) {
  if (!query.email && !query.hash) {
    return {
      notFound: true,
    };
  }

  return {
    props: {},
  };
}

如果参数不存在如何重定向 Next.JS

How to redirect if the param is not present Next.JS

reactjs

next.js

next-router