Página de producto en el navegador en Redux

En la lección anterior creamos una página separada para el producto. Ahora necesitamos hacer que al hacer clic en algún botón nuestra página aparezca en el navegador.

Para empezar, asignemos una dirección en la que se mostrará. Abramos el archivo App.jsx, en el cual definimos las rutas, y agreguemos en children una ruta hija más (no olvide importar ProductPage.jsx). Indiquemos la ruta y el componente que mostraremos:

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

Ahora abramos ProductsList.jsx en la carpeta products y modifiquemos un poco el código para dispProducts. Ahora tenemos una página separada con información completa sobre cada producto. Esto significa que en la lista de productos mostraremos solo el nombre del producto y un texto de descripción abreviado. También agregaremos un enlace en forma de elemento de navegación Link de la biblioteca del enrutador, al hacer clic en el cual se podrá acceder a la página del producto. Agreguemos también una clase product-excerpt a la div, para separar los productos. Ahora nuestro código para dispProducts será así:

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>
))

Importemos Link:

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

Y agreguemos estilos para las clases link-btn y product-excerpt en 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;
}

Finalmente, hagamos también funcional el enlace en el menú de la izquierda, que lleva a la página con la lista de productos, para que podamos acceder a él desde cualquier otro lugar. Para ello, abramos nuestro root.jsx y reemplacemos esta línea de código:

<a>Products</a>

Por la siguiente:

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

Tampoco olvidemos importar NavLink de la biblioteca para React Router:

import { Outlet, NavLink } from 'react-router-dom'

Ejecutemos nuestra aplicación. Ahora podemos acceder a la página de información sobre cualquier producto, haciendo clic en el botón de visualización. Intente ahora agregar un nuevo producto y vea la información sobre él en una página separada haciendo clic en el botón de visualización. También ahora, para volver a la lista de productos basta con hacer clic en 'Products' en el menú de la izquierda. Estando en diferentes páginas, observe cómo cambia la URL en la barra de direcciones del navegador.

Abra su aplicación con los estudiantes. En el archivo App.jsx cree otra ruta hija para la página del estudiante.

En el archivo StudentsList.jsx introduzca en el código cambios para dispStudents, como se muestra en la lección.

Haga que el enlace 'Students' en el menú izquierdo lleve a la página con la lista de estudiantes. Compruebe que todo funcione.

Observe cómo cambiará el valor en la barra de direcciones del navegador, dependiendo de en qué página se encuentra ahora.