Index-Route in React Router

In dieser Lektion lernen wir, was Index-Routen sind.

Lassen Sie uns zunächst etwas beachten. Wenn wir uns auf der Hauptseite befinden, sehen wir rechts einfach einen leeren Bildschirm. Das liegt daran, dass keine der untergeordneten Routen zur Adresse / passt, und wir haben nicht angegeben, was in diesem Fall ausgegeben werden soll. In einem solchen Fall, um keine leere Seite anzuzeigen, kann man eine Index-Route verwenden - eine solche untergeordnete Route, die keinen Pfad hat und deren Element in der übergeordneten Outlet angezeigt wird, wenn keine der untergeordneten Routen passt. Mit solchen Routen kann man Informationen, Statistiken oder etwas Ähnliches platzieren. Wie bei gewöhnlichen Routen können sie auch zum Laden von Daten verwendet werden.

Lassen Sie uns die Datei index.jsx im Ordner routes erstellen, und darin die Komponente Index:

export default function Index() {
	return (
		<div>
			<p>Hi, React Router!</p>
			<p>This is an application for my products :)</p>
		</div>
	);
}

Gehen wir nun zu main.jsx und importieren dort unsere Komponente Index:

import Index from './routes/index';

Und als erstes Element im Array children fügen wir ein Objekt hinzu, bei dem die Eigenschaft index auf true gesetzt ist, und als anzuzeigendes Element unsere Komponente Index dient:

{ index: true, element: <Index /> },

Nehmen Sie die Anwendung, die Sie in den Aufgaben der vorherigen Lektion erstellt haben. Verwenden Sie die Materialien der Lektion und fügen Sie eine Index-Route für die Hauptseite mit irgendeinem Text hinzu.