Installation af React Router i en Redux-applikation

I de foregående lektioner har vi installeret de vigtigste værktøjer til arbejde med Redux. Ofte sker det, at en applikation har brug for en router til navigation mellem dens websider, og vores applikation vil ikke være undtagelsen. For at gøre dette vil vi installere biblioteket React Router.

Åbn vores projekt og skriv følgende kommando i terminalen:

npm install react-router-dom

Lad mig allerede nu sige, at vores Redux-applikation traditionelt handler om produkter, oplysninger om hvilke offentliggøres af nogle sælgere. Derfor vil vi nu omdanne hovedkomponenten App en smule, og også tilføje funktionalitet til gennemførelse af routing i applikationen.

Til at starte med, gå ind i mappen src, og derefter ind i app og opret filen root.jsx her. Dette vil være roden af vores hjemmeside: til venstre vil vi have en lille menu, og til højre - indholdet (lige nu har vi kun en overskrift her):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Produkter</a>
					<a>Sælgere</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Dette er min første Redux-app!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Og komponenten App vil vi omdanne. Til at starte med slet hele dens indhold. Derefter importerer vi to funktioner til routeren og vores rodkomponent Root:

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

Nedenfor efter importen opretter vi routeren, og skriver den første rute, hvor vi giver den vores Root som det element der skal vises og, som følge heraf, sætter stien til '/'. I fremtiden vil vi tilføje andre nødvendige ruter i App:

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

Nedenfor skriver vi koden for funktionen App:

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

export default App

Det er alt. Start appen. I næste afsnit vil vi implementere komponenter til at få Redux-applikationen til at fungere.

Til slut tilføjer vi en smule skønhed ved at skrive nogle styles i index.css:

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;
}

Tilføj React Router til din applikation.

Lad din applikation handle om studerende, oplysninger om hvilke vil blive offentliggjort af undervisere. I betragtning af dette, opret rodkomponenten Root. Omdan komponenten App som beskrevet i lektionen.