Why am I getting different values for asPath property of const router = useRouter()
from next js
useEffect(() => {
console.log(“useEffect”)
const handleStart = (url) => {
console.log(“start phase”)
console.log(“currentUrl: “, router.asPath, “new: “, url)
return url !== router.asPath ? setLoading(true) : setLoading(false)
};
const handleComplete = (url) => {
console.log(“complete phase”);
console.log(“currentUrl: “, router.asPath, “new: “, url)
return url === router.asPath ? setLoading(false) : setLoading(true)
};
router.events.on(‘routeChangeStart’, handleStart)
router.events.on(‘routeChangeComplete’, handleComplete)
router.events.on(‘routeChangeError’, handleComplete)
return () => {
router.events.off(‘routeChangeStart’, handleStart)
router.events.off(‘routeChangeComplete’, handleComplete)
router.events.off(‘routeChangeError’, handleComplete)
}
}, [router.isReady])
if(loading) {
return (<div>Loading….{/*I have an animation here*/}</div>);
}
return (
You can get url from.
window.location.pathname
Aint this like a bug in next/router if I can’t do in the next js way?
Add jsx inside () and use {} for javascript code