Hinzufügen eines Routers zu React Router

Nachdem wir uns ein wenig mit Routern vertraut gemacht haben, können wir einen davon zur Anwendung hinzufügen.

Aber zuerst müssen wir die Vorlage unserer Anwendung, die wir in den vorherigen Lektionen erstellt haben, etwas aufräumen. Konkret kümmern wir uns um den Ordner src. Entfernen Sie daraus den Ordner assets, die Dateien App.css, App.jsx. Im Grunde sollten darin nur noch main.jsx und index.css übrig bleiben.

Öffnen Sie index.css und leeren Sie sie komplett. Lassen Sie sie leer sein.

Jetzt kümmern wir uns um unsere Hauptdatei main.jsx. Darin werden wir folgenden Code haben:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Und jetzt können wir den Router hinzufügen. Wir verwenden BrowserRouter, da er am häufigsten in Webanwendungen verwendet wird. Vergessen wir nicht den modernen Syntax. Wir fügen die Import-Zeile hinzu:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Dann legen wir eine Konstante router an und erstellen unseren BrowserRouter nach den Import-Zeilen. Wir machen das so, dass auf der Hauptseite ein Div mit der Aufschrift 'Hello Router!' angezeigt wird. Dafür geben wir den Pfad zur Hauptseite und das anzuzeigende Element an:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Wir müssen noch die Komponente RouterProvider hinzufügen und den von uns oben erstellten Router übergeben. Sie nimmt alle Router-Objekte entgegen, rendert unsere Anwendung und schaltet andere APIs frei:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Der vollständige Code wird so aussehen:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Speichern wir die Änderungen. Herzlichen Glückwunsch! Unsere Anwendung wirft keine Fehler mehr aus. Wenn wir sie jetzt starten, werden wir auf der Hauptseite im Browser 'Hello Router!' sehen.

Verwenden Sie das bereitgestellte Material, um es so einzurichten, dass auf der Hauptseite Ihrer Anwendung, die Sie in den Hausaufgaben zu den vorherigen Lektionen erstellt haben, ein Absatz mit dem Text 'I'm number one in React!' angezeigt wird.