#solution on reloadpage

4 messages · Page 1 of 1 (latest)

turbid pagoda
#

how can i stop page reloading in astro when i navigating one page to another

torn ravineBOT
#

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

#

Astro uses standard HTML <a> elements to navigate between pages, which by default triggers a full-page refresh. However, you can prevent full-page reloads and enable client-side routing by using the <ViewTransitions /> router component provided by Astro.

Here's how you can do it:

  1. Wrap your page content with the <ViewTransitions /> component. This component enables client-side routing and view transitions in Astro.

  2. To opt out of client-side routing on a per-link basis, you can add the data-astro-reload attribute to any <a> or <form> tag. This attribute will override any existing <ViewTransitions /> component and instead trigger a browser refresh during navigation. If you want to prevent a full-page reload, do not use this attribute.

Here's an example of how to use the <ViewTransitions /> component:

<ViewTransitions>
  <!-- Your page content goes here -->
</ViewTransitions>

And here's an example of a link that will not trigger a full-page reload:

<a href="/your-page-url">Your Page</a>

Remember, the <ViewTransitions /> component must be present on both the current page and the page you're navigating to, in order to prevent a full-page reload.

For more information, you can refer to the Astro documentation on View Transitions (https://docs.astro.build/en/guides/view-transitions#preventing-client-side-navigation) and Astro documentation on Routing (https://docs.astro.build/en/guides/routing#_top).

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

#

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