Hinzufügen einer weiteren Route in React Router

Wir haben eine Root-Route, die zur Hauptseite führt, auf der wir Links zu Produkten haben. Lasst uns jetzt eine weitere Route hinzufügen, damit beim Klick auf einen der Links unsere Produktseite angezeigt wird, und nicht mehr ein Fehlerbildschirm.

Öffnen wir zunächst unsere Anwendung, die wir in den vorherigen Lektionen erstellt haben, und erstellen wir im Ordner routes die Datei product.jsx. Wir erstellen darin die Komponente Product:

function Product() {}

export default Product;

Jetzt erstellen wir innerhalb von Product ein Objekt product, mit den Eigenschaften name, cost und amount. Vorerst sind das einige feste Werte:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Und auf der Produktseite werden wir entsprechend seinen Namen, seinen Preis und seine Menge anzeigen:

return (
	<div>
		<h2>Product page</h2>
		<p>Name: {product.name}</p>
		<p>Cost: {product.cost}</p>
		<p>Amount: {product.amount}</p>
	</div>
);

Vergessen wir nicht, die Komponente Product in der Datei main.jsx zu importieren:

import Product from './routes/product';

Und schließlich fügen wir eine weitere Route in unserer Anwendung hinzu, und zwar direkt nach der Root-Route. Als Pfad geben wir 'products/:productId' an, und als Element für die Anzeige dient die Komponente Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Und jetzt starten wir die Anwendung, klicken auf die Links und landen auf der Produktseite (die momentan für alle Links gleich ist), und nicht mehr auf der Fehlerseite.

Nehmen Sie die Anwendung, die Sie in den Aufgaben der vorherigen Lektionen erstellt haben. Erstellen Sie, basierend auf dem Material der Lektion, auf ähnliche Weise die Datei student.jsx. Lassen Sie auf der Studentenseite deren Vornamen, Nachnamen, Immatrikulationsjahr und Studienfach anzeigen. Fügen Sie eine neue Route für die Studentenseite in der Datei main.jsx hinzu, setzen Sie den Wert von path auf 'students/:studentId'. Stellen Sie sicher, dass Sie beim Klicken auf die Links nun auf die Studentenseite gelangen.