Erstellen einer Root-Route in React Router

Die Hauptroute, die zur Startseite führt, wird oft als Stammroute (root route) bezeichnet, da andere Routen innerhalb davon gerendert werden. Es ist sehr praktisch, sie als separate Komponente darzustellen. Nehmen wir also wieder unsere Anwendung und erstellen im Ordner src einen weiteren, den wir routes nennen. Jetzt erstellen wir in diesem Ordner die Datei root.jsx für eine separate React-Komponente Root. Der Code in der Datei wird so aussehen:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

Und jetzt nehmen wir Änderungen im Code-Snippet der Datei main.jsx vor, da wir als Wert für element jetzt die Komponente Root übergeben werden, und ihr Inhalt sich jetzt in einer separaten Datei root.jsx befindet:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

Vergessen wir nicht die Import-Zeile für unsere Komponente in main.jsx:

import Root from './routes/root';

Öffnen Sie die Anwendung, die Sie in den Aufgaben zu vorherigen Lektionen erstellt haben. Erstellen Sie für die Stammroute eine separate React- Komponente Root in einer separaten Datei root.jsx, wie in dieser Lektion beschrieben. Nehmen Sie die Änderungen in Ihrer Datei main.jsx vor.