Προσθήκη δεδομένων στο React Router

Στα προηγούμενα μαθήματα προετοιμάσαμε τον loader και την εκφόρτωση δεδομένων για μια συγκεκριμένη διαδρομή από το storage. Ας γνωρίσουμε τώρα στο παράδειγμα της εφαρμογής μας πώς να προσθέτουμε ένα νέο προϊόν και να γράφουμε τα δεδομένα του στο storage.

Ας ανοίξουμε το αρχείο root.jsx και ας προσθέσουμε στο layout ένα κουμπί για προσθήκη νέου προϊόντος πριν από το nav, τυλίγοντάς το σε form tag. Επίσης ας τυλίξουμε τώρα το κουμπί και τη λίστα μας σε ένα ακόμη div με #menu. Το layout τώρα θα μοιάζει με αυτό:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">προσθήκη προϊόντος</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Χωρίς Όνομα</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>δεν υπάρχουν προϊόντα εδώ ...</i>
			</p>
			)}
		</div>

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

Αν τώρα πάμε στην καρτέλα 'Δίκτυο' των εργαλείων προγραμματιστή, και στη συνέχεια πατήσουμε το κουμπί μας, θα δούμε ένα λανθασμένο αίτημα εγγράφου στον server. Με τη βοήθεια του React Router, θα χρησιμοποιήσουμε ξανά δρομολόγηση από την πλευρά του client, αποκλείοντας το αίτημα στον server.

Ας αλλάξουμε για αυτό το tag form στο component Form του React Router. Ας προσθέσουμε για αρχή την εισαγωγή του Form:

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

Τώρα ας αντικαταστήσουμε τα tags form στο κομμάτι του κώδικα:

<Form method="post">
	<button type="submit">προσθήκη προϊόντος</button>
</Form>

Επανεκκινήστε την εφαρμογή μας και ρίξτε ξανά μια ματιά στα εργαλεία προγραμματιστή. Πατήστε το κουμπί προσθήκης προϊόντος - τώρα δεν υπάρχει αίτημα στον server (μην δίνετε προσοχή στο σφάλμα προς το παρόν).

Πάρτε την εφαρμογή που δημιουργήσατε στα αποθετήρια για τα προηγούμενα μαθήματα. Χρησιμοποιώντας το υλικό του μαθήματος, διορθώστε το markup της συνάρτησης Root, προσθέστε ένα κουμπί για προσθήκη φοιτητή στο tag form. Βεβαιωθείτε ότι όταν πατάτε το κουμπί γίνεται αίτημα στον server.

Και τώρα αντικαταστήστε το tag form, με το component Form. Βεβαιωθείτε ότι όταν πατάτε το κουμπί προσθήκης φοιτητή δεν αποστέλλεται αίτημα στον server.