redirect to /donate on clicking a button

[vestal sigil]

Hi @runic torrent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can achieve this by using the useRouter hook from Next.js. This hook allows you to do client-side navigations without using the <Link> component. Here's an example of how you can use it:

import { useRouter } from 'next/router'
 
export default function DonateButton() {
 const router = useRouter()
 
 return (
 <button onClick={() => router.push('/donate')}>
 Click here to donate
 </button>
 )
}

In this example, when the button is clicked, the router.push('/donate') function is called, which navigates to the /donate page.

You can find more information about this in the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@runic torrent kapa.ai is still learning and improving, please let us know how it did by reacting below

[runic torrent]

@vestal sigil it shows this:

./components\HeroTitle.tsx
ReactServerComponentsError:

You have a Server Component that imports next/router. Use next/navigation instead.
Learn more: https://nextjs.org/docs/app/api-reference/functions/use-router

Import trace:
  ./components\HeroTitle.tsx
  ./components\Home.tsx
  ./app\(root)\page.tsx```

[vestal sigil]

Let me check the knowledge base for you. One moment! :books:

---

The error message you're seeing is because you're trying to import next/router in a Server Component. In Next.js, Server Components don't support next/router. Instead, you should use next/navigation.

Here's how you can use next/navigation:

import { useNavigation } from 'next/navigation'

export default function DonateButton() {
  const navigation = useNavigation()

  return (
    <button onClick={() => navigation.navigate('/donate')}>
      Click here to donate
    </button>
  )
}

In this example, when the button is clicked, the navigation.navigate('/donate') function is called, which navigates to the /donate page.

You can find more information about this in the Next.js documentation (https://nextjs.org/docs/app/api-reference/functions/use-router).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@runic torrent kapa.ai is still learning and improving, please let us know how it did by reacting below

[runic torrent]

@vestal sigil using useRouter, the page doesn't reloads which's ok, but the slidebar loader doesn't shows on the top till the time page gets loaded

[vestal sigil]

Let me check the knowledge base for you. One moment! :books:

---

In Next.js, when you navigate between pages using the useRouter hook, the navigation happens on the client-side, and by default, there's no loading indicator. If you want to show a loading indicator, you'll need to implement it yourself.

One way to do this is by listening to the router events. The useRouter hook returns a router object, which emits events like routeChangeStart and routeChangeComplete. You can listen to these events to show and hide a loading indicator.

However, in Next.js 13, the router.events has been replaced and the useRouter hook should be imported from next/navigation instead of next/router. The new useRouter hook has some changes and the pathname and query objects have been replaced by usePathname() and useSearchParams() respectively. You can view the full migration guide here (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration).

Unfortunately, the extracts provided do not contain specific information on how to implement a loading indicator with the new useRouter hook from next/navigation. For more detailed information, you may want to refer to the official Next.js documentation or other resources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: