router 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 }
}get cuurent route name nextjs
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
const menu = [
{ title: 'Home', path: '/home' },
{ title: 'Explore', path: '/explore' },
{ title: 'Notifications', path: '/notifications' },
]
const Sidebar = () => {
const router = useRouter()
return (
<div>
{menu.map((item, index) => {
return (
<Link key={index} href={item.path}>
<a
className={`cursor-pointer ${
router.pathname === item.path
? 'text-blue-500'
: 'hover:bg-gray-900 hover:text-blue-500'
}`}
>
{item.title}
</a>
</Link>
)
})}
</div>
)
}
export default SidebarCopyright © 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
