Añadir otra ruta en React Router

Tenemos una ruta raíz que lleva a la página principal, donde tenemos enlaces para productos. Ahora añadamos otra ruta para que al hacer clic en uno de los enlaces se muestre la página del producto, y no la pantalla de error.

Para empezar, abramos nuestra aplicación, que hicimos en lecciones anteriores y creemos en la carpeta routes el archivo product.jsx. Hagamos en él el componente Product:

function Product() {}

export default Product;

Ahora creemos dentro de Product un objeto product, con propiedades name, cost y amount, por ahora estos serán algunos valores fijos:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Y en la página del producto mostraremos, respectivamente, su nombre, costo y cantidad:

return (
	<div>
		<h2>Página del producto</h2>
		<p>Nombre: {product.name}</p>
		<p>Costo: {product.cost}</p>
		<p>Cantidad: {product.amount}</p>
	</div>
);

Asegurémonos de añadir la importación del componente Product en el archivo main.jsx:

import Product from './routes/product';

Y, finalmente, añadamos otra ruta a nuestra aplicación, hagámoslo justo después de la raíz. Como ruta especificaremos 'products/:productId', y como elemento para mostrar tenemos el componente Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Y ahora iniciamos la aplicación, hacemos clic en los enlaces y terminamos en la página del producto (por ahora es igual para todos los enlaces), y no en la de error.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, cree de manera similar el archivo student.jsx, que en la página del estudiante muestre su nombre, apellido, año de ingreso y especialidad. Añada una nueva ruta para la página del estudiante en el archivo main.jsx, establezca el valor de path en 'students/:studentId'. Asegúrese de que al hacer clic en los enlaces ahora llegue a la página del estudiante.