router push indicator
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
im using router.push on the app router, and im trying to add a line loader like youtube when navigating from one router to another.
how do i do this exactly?
how do i do this exactly?
22 Replies
I am using this nextjs toploader: https://www.npmjs.com/package/nextjs-toploader
It's app dir and you can easily insert it. Let me know if it works @Cape lion
It's app dir and you can easily insert it. Let me know if it works @Cape lion
Cape lionOP
yo
Cape lionOP
i placed this in the root layout, but its not really working. is this supposed to work out of the box with router.push?
Cape lionOP
ok i just found out why
it only works with <Link />
is there a way to make work with router.push?
@Cape lion is there a way to make work with router.push?
Are you using the 14.0.3? From nextjs?
Cape lionOP
14.0.1
make a hidden next/link link and use js to get the link and run .click()
ok but seriously, can you try router.prefetch() of the url before the click (like on load)... i have no idea but it would make it more link next/link
ok but seriously, can you try router.prefetch() of the url before the click (like on load)... i have no idea but it would make it more link next/link
Cape lionOP
hmm, how im not sure where to use router.prefetch do u have an example?
Cape lionOP
yeah i saw just remembered... so i kinda don't think it is the cause now ðŸ˜
Cape lionOP
does anybody else have an idea?
I would like to propose a solution for the challenge you're facing
//layout.tsx
'use client'
import Header from '@/components/include/Header'
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<ProgressBar height="4px" color="#0e7883" options={{ showSpinner: false }} shallowRouting />
<Header />
{children}
</body>
</html>
)
}Cape lionOP
using use client in the layout file would make all the children client components as well
so i dont think this is a good way to do this
and overall i think its impossible to do this with router.push. because it requires the userouter hook and userouter needs to be set inside a client component
the reason it works with <Link /> is because it works with server components
thanks for the suggestion tho!
yeah just don't make layout client, as you can just import client into if needed anyway
Cape lionOP
alright, thanks for the help guys!