← Pagina Inicial

Rotas dinâmicas

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9

Polindo a página Index

Como etapa final, vamos atualizar nossa página de índice (pages/index.js).

Em particular, precisamos adicionar links a cada página de postagem. Usaremos o componente Link, mas desta vez precisamos fazer algo diferente.

Para vincular a uma página com rotas dinâmicas, você precisa usar o componente Link de maneira diferente. No nosso caso, para criar um link para /posts/ssg-ssr, você precisa escrevê-lo assim:

<Link href="/posts/[id]" as="/posts/ssg-ssr">
  <a>...</a>
</Link>

Como você pode ver, você precisa usar [id] para href e o caminho real (ssg-ssr) para as as prop.

Vamos implementá-lo. Primeiro, importe o Link e a Date em pages/index.js:

import Link from 'next/link'
import Date from '../components/date'

Em seguida, próximo à parte inferior do componente Home, substitua a tag li pelo seguinte:

<li className={utilStyles.listItem} key={id}>
  <Link href="/posts/[id]" as={`/posts/${id}`}>
    <a>{title}</a>
  </Link>
  <br />
  <small className={utilStyles.lightText}>
    <Date dateString={date} />
  </small>
</li>

Agora ele deve ter os links para cada artigo:

Se algo não estiver funcionando, verifique se o seu código está assim.

É isso aí! Antes de concluirmos esta lição, vamos falar sobre algumas dicas de uso de rotas dinâmicas na próxima página.

← Pagina Inicial