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:
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!