Adicionando mais uma rota no React Router

Temos a rota raiz, que leva à página inicial, onde temos links para produtos. Vamos agora adicionar mais uma rota para que, ao clicar em um dos links, a página do produto seja exibida, e não a tela de erro.

Para começar, vamos abrir nosso aplicativo, que fizemos nas lições anteriores, e criar na pasta routes o arquivo product.jsx. Vamos fazer nele o componente Product:

function Product() {}

export default Product;

Agora vamos criar dentro do Product um objeto product, com as propriedades name, cost e amount, por enquanto serão alguns valores fixos:

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

export default Product;

E na página do produto vamos exibir, respectivamente, seu nome, custo e quantidade:

return (
	<div>
		<h2>Página do Produto</h2>
		<p>Nome: {product.name}</p>
		<p>Custo: {product.cost}</p>
		<p>Quantidade: {product.amount}</p>
	</div>
);

Vamos adicionar obrigatoriamente a importação do componente Product no arquivo main.jsx:

import Product from './routes/product';

E, finalmente, vamos adicionar mais uma rota em nosso aplicativo, vamos fazer isso logo após a rota raiz. Como caminho vamos usar 'products/:productId', e como elemento para exibição teremos o componente Product:

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

E agora iniciamos o aplicativo, clicamos nos links e chegamos na página do produto (por enquanto ela é igual para todos os links), e não na página de erro.

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, crie de forma similar o arquivo student.jsx, que na página do estudante exiba seu primeiro nome, sobrenome, ano de admissão e curso. Adicione uma nova rota para a página do estudante no arquivo main.jsx, defina o valor de path para 'students/:studentId'. Certifique-se de que, ao clicar nos links, você agora vai para a página do estudante.