Referência de Roteamento
Não há uma configuração de roteamento separada em Astro.
Todo arquivo de página suportado localizado dentro do diretório especial src/pages/
cria uma rota. Quando o nome do arquivo contém um parâmetro, uma rota pode criar múltiplas páginas dinamicamente, de outra forma, cria uma única página.
Por padrão, todas as rotas de páginas e endpoints Astro são geradas e pré-renderizadas no momento da construção. Renderização sob demanda no servidor (EN) pode ser configurada para rotas individuais ou como padrão.
prerender
Seção intitulada prerenderTipo: boolean
Padrão: true
no modo estático (padrão); false
com a configuração output: 'server'
astro@1.0.0
Valor exportado de cada rota individual para determinar se será ou não pré-renderizada.
Por padrão, todas as páginas e endpoints são pré-renderizados e gerados estaticamente no momento da construção. Você pode desativar a pré-renderização em uma ou mais rotas, e pode ter rotas estáticas e renderizadas sob demanda no mesmo projeto.
Substituição por página
Seção intitulada Substituição por páginaVocê pode substituir o valor padrão para ativar a renderização sob demanda (EN) para uma rota individual exportando prerender
com o valor false
nesse arquivo:
---export const prerender = false---<!-- conteúdo renderizado no servidor --><!-- o restante do meu site é estático -->
Alternar para modo server
Seção intitulada Alternar para modo serverVocê pode substituir o valor padrão para todas as rotas configurando output: 'server'
. Nesse modo de saída, todas as páginas e endpoints serão gerados no servidor sob demanda em vez de serem pré-renderizados.
No modo server
, ative a pré-renderização para uma rota individual exportando prerender
com o valor true
desse arquivo:
---// com `output: 'server'` configuradoexport const prerender = true---<!-- Minha página "sobre" estática --><!-- Todas as outras páginas são renderizadas sob demanda -->
partial
Seção intitulada partialTipo: boolean
Padrão: false
astro@3.4.0
Valor exportado de uma rota individual para determinar se deve ser renderizada como uma página HTML completa.
Por padrão, todos os arquivos dentro do diretório reservado src/pages/
incluem automaticamente a declaração <!DOCTYPE html>
e conteúdo adicional <head>
, como estilos e scripts com escopo Astro.
Você pode sobrescrever esse valor padrão para definir o conteúdo como um parcial de página de uma rota individual exportando um valor partial
deste arquivo:
---export const partial = true---<!-- HTML gerado disponível em uma URL --><!-- Disponível para uma biblioteca de renderização -->
O export const partial
deve ser identificável estaticamente. Ele pode ter os seguintes valores:
- O booleano
true
. - Uma variável de ambiente usando import.meta.env, como
import.meta.env.USE_PARTIALS
.
getStaticPaths()
Seção intitulada getStaticPaths()Tipo: (options: GetStaticPathsOptions) => Promise<GetStaticPathsResult> | GetStaticPathsResult
astro@1.0.0
Uma função para gerar múltiplas rotas de página pré-renderizadas a partir de um único componente de página .astro
com um ou mais parâmetros em seu caminho de arquivo. Use isso para rotas que serão criadas no momento da construção, também conhecido como construção de site estático.
A função getStaticPaths()
deve retornar um array de objetos para determinar quais caminhos de URL serão pré-renderizados por Astro. Cada objeto deve incluir um objeto params
para especificar caminhos de rota. O objeto pode opcionalmente conter um objeto props
com dados a serem passados para cada modelo de página.
---// No modo 'server', inclua pré-renderização:// export const prerender = true
export async function getStaticPaths() { return [ // { params: { /* required */ }, props: { /* optional */ } }, { params: { post: '1' } }, // [post] é o parâmetro { params: { post: '2' } }, // deve corresponder ao nome do arquivo // ... ];}---<!-- Seu modelo HTML aqui. -->
getStaticPaths()
também pode ser usado em endpoints de arquivos estáticos para roteamento dinâmico.
Ao usar TypeScript, use a utilidade de tipo GetStaticPaths
para garantir acesso de tipos seguro dos seus params
e props
.
A função getStaticPaths()
executa uma vez em seu próprio escopo isolado, antes de qualquer página carregar. Por isso você não pode referenciar nada do escopo pai além de importações de arquivos. O compilador avisará se essa exigência for violada.
params
Seção intitulada paramsA chave params
de cada objeto no array retornado por getStaticPaths()
informa ao Astro quais rotas devem ser construídas.
As chaves em params
devem corresponder aos parâmetros definidos no caminho de arquivo do seu componente. O valor de cada objeto params
deve corresponder aos parâmetros usados no nome da página. params
são codificados na URL, então apenas strings são suportadas como valores.
Por exemplo, src/pages/posts/[id].astro
tem um parâmetro id
em seu nome de arquivo. A seguinte função getStaticPaths()
neste componente .astro
instrui Astro a gerar estaticamente posts/1
, posts/2
e posts/3
no momento da construção.
---export async function getStaticPaths() { return [ { params: { id: '1' } }, { params: { id: '2' } }, { params: { id: '3' } } ];}
const { id } = Astro.params;---<h1>{id}</h1>
Passagem de dados com props
Seção intitulada Passagem de dados com propsPara passar dados adicionais para cada página gerada, você pode definir um valor props
em cada objeto no array retornado por getStaticPaths()
. Diferente de params
, props
não são codificados na URL e não estão limitados apenas a strings.
Por exemplo, se você gerar páginas com dados obtidos de uma API remota, poderá passar o objeto de dados completo para o componente da página dentro de getStaticPaths()
. O modelo da página pode referenciar os dados de cada postagem usando Astro.props
.
---export async function getStaticPaths() { const data = await fetch('...').then(response => response.json());
return data.map((post) => { return { params: { id: post.id }, props: { post }, }; });}
const { id } = Astro.params;const { post } = Astro.props;---<h1>{id}: {post.name}</h1>
paginate()
Seção intitulada paginate()
Adicionado em:
astro@1.0.0
Uma função que pode ser retornada de getStaticPaths()
para dividir itens de uma coleção de conteúdo em páginas separadas.
paginate()
gerará automaticamente o array necessário para ser retornado do getStaticPaths()
para criar uma URL para cada página da sua coleção paginada. O número da página será passado como um param
, e os dados da página serão passados como um prop
chamado page
.
O exemplo a seguir obtém e passa 150 itens para a função paginate
, criando páginas estáticas pré-renderizadas no momento da construção, que exibirão 10 itens por página:
---export async function getStaticPaths({ paginate }) { // Carregue seus dados com fetch(), getCollection(), etc. const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`); const result = await response.json(); const allPokemon = result.results;
// Retorne uma coleção paginada de caminhos para todos os itens return paginate(allPokemon, { pageSize: 10 });}
const { page } = Astro.props;---
paginate()
aceita os seguintes argumentos:
data
- array contendo os dados da página passados para a funçãopaginate()
options
- Objeto opcional com as seguintes propriedades:pageSize
- O número de itens mostrados por página (10
por padrão)params
- Envia parâmetros adicionais para a criação de rotas dinâmicasprops
- Envia props adicionais disponíveis em cada página
paginate()
assume um nome de arquivo [page].astro
ou [...page].astro
. O parâmetro page
se torna o número da página na sua URL:
/posts/[page].astro
geraria as URLs/posts/1
,/posts/2
,/posts/3
, etc./posts/[...page].astro
geraria as URLs/posts
,/posts/2
,/posts/3
, etc.
A prop de paginação page
Seção intitulada A prop de paginação pageTipo: Page<TData>
A paginação passará uma prop page
para cada página renderizada que representa uma página única dos dados da coleção paginada. Isso inclui os dados que você paginou (page.data
), bem como metadados da página (page.url
, page.start
, page.end
, page.total
, etc). Esses metadados são úteis para coisas como um botão “Próxima Página” ou uma mensagem “Exibindo 1-10 de 100”.
page.data
Seção intitulada page.dataTipo: Array<TData>
Array de dados retornados pela função paginate()
para a página atual.
page.start
Seção intitulada page.startTipo: number
Índice do primeiro item da página atual, começando em 0
. (com pageSize: 25
, o valor é 0
na página 1, 25
na página 2, etc.)
page.end
Seção intitulada page.endTipo: number
Índice do último item da página atual.
page.size
Seção intitulada page.sizeTipo: number
Padrão: 10
O número total de itens por página.
page.total
Seção intitulada page.totalTipo: number
O número total de itens em todas as páginas.
page.currentPage
Seção intitulada page.currentPageTipo: number
O número da página atual, começando em 1
.
page.lastPage
Seção intitulada page.lastPageTipo: number
O número total de páginas.
page.url.current
Seção intitulada page.url.currentTipo: string
Obtém a URL da página atual (útil para URLs canônicas). Se um valor de base
for definido, a URL começará com esse valor.
page.url.prev
Seção intitulada page.url.prevTipo: string | undefined
Obtém a URL da página anterior (será undefined
se estiver na página 1). Se um valor de base
for definido, o caminho base será adicionado à URL.
page.url.next
Seção intitulada page.url.nextTipo: string | undefined
Obtém a URL da próxima página (será undefined
se não houver mais páginas). Se um valor de base
for definido, o caminho base será adicionado à URL.
page.url.first
Seção intitulada page.url.firstTipo: string | undefined
astro@4.12.0
Obtém a URL da primeira página (será undefined
se estiver na página 1). Se um valor de base
for definido, o caminho base será adicionado à URL.
page.url.last
Seção intitulada page.url.lastTipo: string | undefined
astro@4.12.0
Obtém a URL da última página (será undefined
se não houver mais páginas). Se um valor de base
for definido, o caminho base será adicionado à URL.