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:

return (
	<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:

import { Form } from 'react-router-dom';

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

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

Pegue a aplicação criada por você nas tarefas das lições anteriores. Usando os materiais da lição, corrija o layout da função Root, adicione um botão para adicionar um estudante na tag form. Certifique-se de que ao pressionar o botão uma solicitação seja enviada para o servidor.

E agora substitua a tag form pelo componente Form. Certifique-se de que ao clicar no botão de adicionar estudante nenhuma solicitação seja enviada para o servidor.