Installation von React Router in einer Redux-Anwendung

In den vorherigen Lektionen haben wir die grundlegenden Werkzeuge für die Arbeit mit Redux installiert. Oft benötigt eine Anwendung einen Router für die Navigation durch ihre Webseiten und unsere Anwendung wird keine Ausnahme sein. Dafür installieren wir die Bibliothek React Router.

Wir öffnen unser Projekt und geben im Terminal folgenden Befehl ein:

npm install react-router-dom

Um ein wenig vorzugreifen, möchte ich sagen, dass unsere Redux-Anwendung traditionell Produkten gewidmet ist, über die Informationen von bestimmten Verkäufern bereitgestellt werden. Daher werden wir jetzt die Hauptkomponente App etwas umgestalten und der Anwendung Funktionalität für das Routing hinzufügen.

Zunächst gehen wir in den Ordner src, dann in app und erstellen hier die Datei root.jsx. Dies wird die Wurzel unserer Website sein: links haben wir ein Menü, und rechts - den Inhalt (vorerst haben wir hier nur eine Überschrift):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Products</a>
					<a>Sellers</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>This is my first Redux app!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Und die Komponente App gestalten wir um. Zunächst entfernen wir vollständig ihren Inhalt. Dann importieren wir zwei Funktionen für den Router und unsere Stammkomponente Root:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Nach dem Import erstellen wir unten einen Router und legen die erste Route an, indem wir unsere Root-Komponente als anzuzeigendes Element übergeben und entsprechend den Pfad auf '/' setzen. In Zukunft werden wir in App auch andere notwendige Routen hinzufügen:

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

Darunter schreiben wir den Code der Funktion App:

function App() {
	return <RouterProvider router={router} />
}

export default App

Fertig. Wir starten. Im nächsten Abschnitt werden wir die Komponenten für die Funktionsweise der Redux Anwendung implementieren.

Abschließend fügen wir ein wenig Schönheit hinzu, indem wir dafür Stile in index.css definieren:

body {
	font-size: 24px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

ul {
	list-style: none;
	padding: 0;
}

h1, h2, h3 {
	margin: 0;
}

a {
	text-decoration: none;
	color: blue;
	cursor: pointer;
}

#main {
	display: flex;
	margin: 20px;
}

#menu {
	margin-right: 50px;
	padding-top: 50px;
	padding-right: 50px;
	border-right: 2px solid lightgray;
	font-weight: bold;
}

Fügen Sie React Router zu Ihrer Anwendung hinzu.

Lassen Sie Ihre Anwendung Studenten betreffen, über die Informationen von Dozenten bereitgestellt werden. Berücksichtigen Sie dies, erstellen Sie die Stammkomponente Root. Gestalten Sie die Komponente App um, wie in der Lektion beschrieben.