1

Not sure how to resolve this error, as the docs mention a Link tag:

Why This Error Occurred

Somewhere you are utilizing the next/link component, Router#push, or Router#replace with href interpolation to build dynamic routes but did not provide all of the needed dynamic route params to properly interpolate the href.

Note: this error will only show when the next/link component is clicked not when only rendered.

Invalid href interpolation

import Link from 'next/link'

export default function BlogLink() {
  return (
    <Link
      href={{
        pathname: '/blog/[post]/[comment]',
        query: { post: 'post-1' },
      }}
    >
      <a>Invalid link</a>
    </Link>
  )
}

In my case I am generating an email with a link in it:

Please verify your account by clicking the following link: http://localhost:8016/confirmation/ef2ad8e7dc5e60a8a0c6a640f26f5dcd

so in my pages directory if have:

enter image description here

And my page is importing a component which renders the confirmation page:

import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import axios from 'axios';
import Message from '../../components/Message/index';

export default function isConfirmation(
  dispatch,
  error,
  setError,
  setResponseMessage = () => { },
  responseMessage,
  token
) {

  const [showApi, setShowApi] = useState(true);
  const router = useRouter();


  useEffect(() => {
    let isSubscribed = true

    if (!router.isReady) return;

    console.log("token 27 in CONFIRMATION ", token);
    axios
      .get(`/api/confirmation/${token}`)
      .then(response => {

        console.log("response ", response);
        if (response.status === 200) {
          isSubscribed ? setResponseMessage(response.data.msg) : null;
        }

      })
      .catch((error) => {
        if (error.response.status === 404) {
          dispatch({ type: 'resetUserAccountIsVerified' })

          setError(true);
          isSubscribed ? setResponseMessage(error.response.data.msg) : null;

        }

        if (error.response.status === 400) {
          dispatch({ type: 'userAccountIsVerified' })

          setError(true);
          isSubscribed ? setResponseMessage(error.response.data.msg) : null;

        }
      });

    return () => {
      isSubscribed = false;
      setShowApi(prev => !prev);
    };
  }, [router.query.token]);



  if (error) {
    return showApi && <Message state="Error" content={responseMessage} />
  }
  if (error === false) {
    return showApi && <Message state="Success" header={responseMessage} />
  }
}

The token has a value from my console.log above and the request to my /api/confirmation/:token works (e.g. I get a response) it's just the page doesn't render right and I get that error.

Please help!

Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141

0 Answers0