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

lo8azlld  于 2022-12-12  发布在  其他
关注(0)|答案(3)|浏览(140)

我有页面,可以有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,即使存在哈希或电子邮件参数,用户也会被重定向。
我该如何解决这个问题?有什么建议吗?

4xrmg8kj

4xrmg8kj1#

在做了一些研究之后,我发现最好检查参数是否存在于getServerSideProps()

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

  return {
    props: {},
  };
}
myss37ts

myss37ts2#

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

const MyComponentCheck = () => {
    const router = useRouter();

    useEffect(() => {
        if (typeof window) {
            const a = window.location.href;
            if (a?.includes('your_query_param')) {

            } else {
                router.push('/')
            }
        }
    }, [])
}

export default MyComponentCheck;

您可以检查窗口对象,这样您的代码将只在您有URL时运行,以防止未定义的问题

mznpcxlj

mznpcxlj3#

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

对于文件[pid].js,位于页/多页/[pid].js中
或者,要使用两个参数选项,你需要访问一个同时使用这两个选项的网站页面,所以它们之间必须有一个标签。
如“网站/电子邮件/散列”

相关问题