Adicionando dados em React Router

Nas lições anteriores, preparamos um carregador e a descarga de dados para uma rota específica a partir do armazenamento. Vamos agora conhecer, usando o exemplo de nossa aplicação, como adicionar um novo produto e gravar seus dados no armazenamento.

Vamos abrir o arquivo root.jsx e adicionar ao layout um botão para adicionar um novo produto antes do nav, envolvendo-o em uma tag de formulário. Também vamos agora envolver o botão e nossa lista em outra div com #menu. O layout agora ficará assim:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">adicionar produto</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>Sem Nome</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>nenhum produto aqui ...</i>
      </p>
      )}
    </div>

    <div id="product">
      <Outlet />
    </div>
  </div>
);

Se acessarmos a aba 'Rede' do painel do desenvolvedor agora e então clicarmos no nosso botão, veremos uma solicitação de documento com erro para o servidor. Com o React Router, usaremos novamente o roteamento do lado do cliente, evitando a solicitação ao servidor.

Vamos para isso mudar a tag form para o componente Form do React Router. Vamos adicionar primeiro a importação do Form:

routes/root.jsximport { Form } from 'react-router-dom';

Agora substitua as tags form no trecho de código:

root.jsx<Form method="post">
  <button type="submit">adicionar produto</button>
</Form>

Recarregue nossa aplicação e verifique novamente o painel do desenvolvedor. Vamos clicar no botão de adicionar produto - agora não há mais uma solicitação para o servidor (ignore o erro por enquanto).