#How to show the same page on different path

3 messages · Page 1 of 1 (latest)

frail hazel
#

Say that I have the path/posts and /posts/1, how do I make it so that /posts show the same content as /posts/1? /posts/1 is implemented as dynamic route using pagination

civic gobletBOT
#

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

#

To make /posts show the same content as /posts/1, you can use the paginate() function in Astro. This function is used for pagination and it generates an array to return from getStaticPaths() that creates one URL for every page of the paginated collection.

Here is an example of how you can use the paginate() function:

export async function getStaticPaths({ paginate }) {
 // Load your data with fetch(), Astro.glob(), etc.
 const response = await fetch(`<https://pokeapi.co/api/v2/pokemon?limit=150`>);
 const result = await response.json();
 const allPokemon = result.results;

 // Return a paginated collection of paths for all posts
 return paginate(allPokemon, { pageSize: 10 });
}

// If set up correctly, The page prop now has everything that
// you need to render a single page (see next section).
const { page } = Astro.props;

(Source: Astro Documentation (https://docs.astro.build/en/reference/api-reference#paginate))

In this example, paginate() assumes a file name of [page].astro or [...page].astro. The page param becomes the page number in your URL. So, /posts/[page].astro would generate the URLs /posts/1, /posts/2, /posts/3, etc. and /posts/[...page].astro would generate the URLs /posts, /posts/2, /posts/3, etc.

To make /posts show the same content as /posts/1, you can use the [...page].astro filename. This will generate a URL /posts that shows the same content as /posts/1.

Remember to adjust the pageSize parameter in the paginate() function to control how many items are displayed per page.

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