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:

routes/product.jsxfunction 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:

routes/product.jsxfunction 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:

routes/product.jsxreturn (
  <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:

main.jsximport 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:

main.jsx{
  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.