Installasjon av React Router i en Redux-applikasjon

På de foregående leksjonene installerte vi de viktigste verktøyene for arbeid med Redux. Det hender ofte at en applikasjon trenger en ruter for navigering mellom sine nettsider, og applikasjonen vår vil ikke være noe unntak. For å gjøre dette vil vi installere biblioteket React Router.

La oss åpne prosjektet vårt og skrive følgende kommando i terminalen:

npm install react-router-dom

For å komme litt for fort, vil jeg si at Redux-applikasjonen vår tradisjonelt handler om produkter, informasjon om som legges ut av noen selgere. Derfor skal vi nå gjøre om hovedkomponenten App litt, og også legge til funksjonalitet for ruting i applikasjonen.

Først, la oss gå inn i mappen src, og deretter inn i app og opprette filen root.jsx her. Dette vil være roten til nettsiden vår: til venstre vil vi ha en meny, og til høyre - innhold (foreløpig har vi bare en overskrift her):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Produkter</a>
					<a>Selgere</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 endre. Først sletter vi hele innholdet. Deretter importerer vi to funksjoner for ruteren og vår rotkomponent Root:

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

Lenger ned etter importen oppretter vi en ruter, og skriver inn den første ruten, sender vår Root som element som skal vises og, følgelig, setter stien til '/'. Senere i App vil vi legge til andre nødvendige ruter:

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

Lenger ned skriver vi koden for funksjonen App:

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

export default App

Ferdig. La oss starte. I neste avsnitt skal vi implementere komponenter for arbeid med Redux applikasjonen.

Til slutt legger vi til litt estetikk, ved å skrive stilene for dette 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;
}

Legg til React Router i applikasjonen din.

La applikasjonen din handle om studenter, informasjon om som vil bli lagt ut av forelesere. Med dette i betraktning, opprett en rotkomponent Root. Endre komponenten App som beskrevet i leksjonen.