Instalarea React Router în aplicația Redux

În lecțiile anterioare am instalat instrumentele de bază pentru lucrul cu Redux. Adesea se întâmplă ca o aplicație să aibă nevoie de un router pentru navigarea între paginile sale web și aplicația noastră nu va face excepție. Pentru aceasta vom instala biblioteca React Router.

Deschidem proiectul nostru și tastăm în terminal următoarea comandă:

npm install react-router-dom

Avansând puțin înainte, voi spune că aplicația noastră Redux este în mod tradițional dedicată produselor, despre care informațiile sunt postate de către unii vânzători. De aceea acum vom modifica puțin componenta principală App, și de asemenea vom adăuga în aplicație funcționalitatea pentru realizarea rutării.

Pentru început intrăm în folderul src, apoi în app și creăm aici fișierul root.jsx. Acesta va fi rădăcina site-ului nostru: în stânga vom avea un meniu, iar în dreapta - conținutul (momentan avem aici doar un titlu):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Produse</a>
					<a>Vânzători</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Aceasta este prima mea aplicație Redux!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Iar componenta App o vom modifica. Pentru început ștergem complet conținutul acesteia. Apoi importăm două funcții pentru router și componenta noastră rădăcină Root:

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

Mai jos după import creăm routerul, și specificăm prima rută, transmitându-i Root ca element de afișat și, respectiv, setând calea la '/'. În continuare în App vom adăuga și alte rute necesare:

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

Mai jos scriem codul funcției App:

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

export default App

Gata. Pornim. În secțiunea următoare vom implementa componente pentru funcționarea aplicației Redux.

În final adăugăm puțină frumusețe, specificând pentru aceasta stiluri în 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;
}

Adăugați React Router în aplicația voastră.

Fie că aplicația voastră se referă la studenți, despre care informațiile vor fi postate de profesori. Ținând cont de aceasta, creați componenta rădăcină Root. Modificați componenta App cum este descris în lecție.