Hinzufügen von Daten in React Router

In den vorherigen Lektionen haben wir den Loader vorbereitet und das Entladen von Daten für eine bestimmte Route aus dem Speicher. Lassen Sie uns nun am Beispiel unserer Anwendung kennenlernen, wie man ein neues Produkt hinzufügt und seine Daten in den Speicher schreibt.

Öffnen wir die Datei root.jsx und fügen wir im Layout einen Button zum Hinzufügen eines neuen Produkts vor nav hinzu, indem wir ihn in ein Form-Tag wrappen. Außerdem wrappen wir nun den Button und unsere Liste in eine weitere Div mit #menu. Das Layout sieht jetzt so aus:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">add product</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Unnamed</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>no products here ...</i>
			</p>
			)}
		</div>

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

Wenn wir jetzt in den Tab 'Netzwerk' der Entwicklerwerkzeuge gehen und dann auf unseren Button klicken, sehen wir eine fehlerhafte Anfrage eines Dokuments an den Server. Mit React Router werden wir erneut das Clientseitige Routing nutzen, um die Anfrage an den Server auszuschließen.

Lassen Sie uns dazu das form-Tag durch die Form-Komponente von React Router ersetzen. Fügen wir zunächst den Import für Form hinzu:

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

Ersetzen wir nun die form-Tags im Codeausschnitt:

<Form method="post">
	<button type="submit">add product</button>
</Form>

Laden Sie unsere Anwendung neu und schauen Sie nochmals in die Entwicklerwerkzeuge. Klicken wir auf den Button zum Hinzufügen eines Produkts - jetzt gibt es keine Anfrage an den Server mehr (ignorieren Sie vorerst den Fehler).

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vergangenen Lektionen erstellt haben. Nutzen Sie die Materialien der Lektion, korrigieren Sie das Markup der Funktion Root, fügen Sie einen Button zum Hinzufügen eines Studenten im form-Tag hinzu. Vergewissern Sie sich, dass beim Drücken des Buttons eine Anfrage an den Server stattfindet.

Und jetzt ersetzen Sie das form-Tag durch die Form-Komponente. Vergewissern Sie sich, dass beim Klick auf den Button zum Hinzufügen eines Studenten keine Anfrage an den Server gesendet wird.