Página do produto no navegador no Redux

Na última aula, criamos uma página separada para o produto. Agora precisamos fazer com que, ao clicar em um botão, nossa página apareça no navegador.

Para começar, vamos atribuir um endereço (URL) para ela, onde será exibida. Abra o arquivo App.jsx, onde definimos as rotas, e adicione em children mais uma rota filha (não se esqueça de importar ProductPage.jsx). Vamos especificar o caminho (path) e o componente que será renderizado:

App.jsx{
  path: '/products/:productId',
  element: <ProductPage />,
},

Agora vamos abrir ProductsList.jsx na pasta products e modificar um pouco o código para dispProducts. Agora temos uma página separada com informações completas sobre cada produto. Isso significa que na lista de produtos vamos exibir apenas o nome do produto e um texto de descrição resumido. Também adicionaremos um link na forma de um elemento de navegação Link da biblioteca do roteador, ao clicar no qual será possível acessar a página do produto. Vamos adicionar também uma div com a classe product-excerpt, para separar visualmente os produtos. Agora nosso código para dispProducts ficará assim:

products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id} className="product-excerpt">
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <Link to={`/products/${product.id}`} className="link-btn">
      view
    </Link>
  </div>
))

Vamos importar Link:

products/ProductsList.jsximport { Link } from 'react-router-dom'

E adicionar estilos para as classes link-btn e product-excerpt no index.css:

index.css.product-excerpt {
  margin-top: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 10px;
}

.link-btn {
  border: 1.5px solid gray;
  border-radius: 10px;
  background-color: coral;
  color: black;
  padding: 1px 12px 1px 12px;
}

Por último, vamos também tornar funcional o link no menu à esquerda, que leva à página com a lista de produtos, para que possamos acessá-la de qualquer outro lugar. Para isso, abra nosso root.jsx e substitua esta linha de código:

app/root.jsx<a>Products</a>

Pela seguinte:

app/root.jsx<NavLink to="/products" end>
  Products
</NavLink>

Também não vamos esquecer de importar NavLink da biblioteca do React Router:

app/root.jsximport { Outlet, NavLink } from 'react-router-dom'

Vamos executar nossa aplicação. Agora podemos acessar a página de informações de qualquer produto, clicando no botão de visualização. Tente agora adicionar um novo produto e veja as informações sobre ele na página separada clicando no botão de visualização. Também agora, para voltar à lista de produtos basta clicar em 'Products' no menu à esquerda. Estando em páginas diferentes, observe como o URL na barra de endereços do navegador muda.