I would like to pass message between pages and display it after Astro.redirect command. How can I solve this problem?
#SSR server storage ?
winter needle
dark lynxBOT
Hi @winter needle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro does not provide a built-in server-side storage mechanism for passing data between pages. However, you can use a combination of Astro.redirect() and data-* attributes to pass data from the server to the client.
Here's a general idea of how you can do it:
- In your Astro component, use
Astro.redirect()to redirect to another page. This must be done in a page component, not a child component. Here's an example from the Astro documentation (https://docs.astro.build/en/reference/api-reference#astroredirect):
---
import { isLoggedIn } from '../utils';
const cookie = Astro.request.headers.get('cookie');
// If the user is not logged in, redirect them to the login page
if (!isLoggedIn(cookie)) { return Astro.redirect('/login'); }
---
- To pass data from the server to the client, you can use
data-*attributes to store the value of variables in your HTML output. Scripts can then read these attributes using an element’sdatasetproperty once your HTML loads in the browser. Here's an example from the Astro documentation (https://docs.astro.build/en/guides/client-side-scripts#pass-frontmatter-variables-to-scripts):
---
const { message = 'Welcome, world!' } = Astro.props;
---
<!-- Store the message prop as a data attribute. -->
<astro-greet data-message={message}>
<button>Say hi!</button>
</astro-greet>
<script>
class AstroGreet extends HTMLElement {
constructor() {
super();
// Read the message from the data attribute.
const message = this.dataset.message;
const button = this.querySelector('button');
button.addEventListener('click', () => { alert(message); });
}
}
customElements.define('astro-greet', AstroGreet);
</script>