next js link
import Link from "next/link"; //import this
<Link href="/"> //wrap a tag with Link
<a>Home</a>
</Link>
<Link href="https://nextjs.org"> //external page
<a>Next.js</a>
</Link>next js link
import Link from "next/link"; //import this
<Link href="/"> //wrap a tag with Link
<a>Home</a>
</Link>
<Link href="https://nextjs.org"> //external page
<a>Next.js</a>
</Link>next link
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
<li>
<Link href="/blog/hello-world">
<a>Blog Post</a>
</Link>
</li>
</ul>
)
}
export default Homerouter nextjs
import { useRouter } from 'next/router'
function ActiveLink({ children, href }) {
const router = useRouter()
const handleClick = (e) => {
e.preventDefault()
router.push(href)
}
return (
<a href={href} onClick={handleClick} style={style}>
{children}
</a>
)
}
export default ActiveLinknextjs router get complete url
function getFullUrl(req, fallback) {
//server side request object(req)
if(req) {
return req.protocol + '://' + req.get('host') + req.originalUrl
} //making sure we are on the client side
else if(!(typeof window === 'undefined')) {
return window.location.href
} else {
return fallback
}
}
//usage on nextjs
static async getInitialProps({req}) {
let fullUrl = getFullUrl(req, "")//gets the full url or fallback to ""
return { fullUrl: fullUrl }
}link in next js is refresh page
<Link href="/shop/[pid]" as={`/shop/${id}`}>
<a>Shop by menu</a>
</Link>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
