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:

{
	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:

const 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:

import { Link } from 'react-router-dom'

E adicionar estilos para as classes link-btn e product-excerpt no 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:

<a>Products</a>

Pela seguinte:

<NavLink to="/products" end>
	Products
</NavLink>

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

import { 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.

Abra sua aplicação com os estudantes. No arquivo App.jsx crie mais uma rota filha para a página do estudante.

No arquivo StudentsList.jsx, faça alterações no código para dispStudents, conforme mostrado na lição.

Faça com que o link 'Students' no menu esquerdo leve à página com a lista de estudantes. Verifique se tudo está funcionando.

Observe como o valor na barra de endereços do navegador muda, dependendo de em qual página você está no momento.