React Router instalēšana Redux lietotnē

Iepriekšējās nodarbībās mēs instalējām galvenos rīkus darbam ar Redux. Bieži gadās, ka lietotnei ir nepieciešams maršrutētājs navigācijai pa tās web lapām, un mūsu lietotne nebūs izņēmums. Šim nolūkam mēs instalēsim bibliotēku React Router.

Atvērsim mūsu projektu un ierakstīsim terminālī šādu komandu:

npm install react-router-dom

Nedaudz apsteidzot notikumus, teikšu, ka mūsu Redux lietotne tradicionāli veltīta produktiem, par kuriem informāciju ievieto daži pārdevēji. Tāpēc tagad mēs nedaudz pārveidosim galveno komponentu App, un arī pievienosim lietotnē funkcionalitāti maršrutēšanas veikšanai.

Sākumā iesim mapē src, tad app un izveidosim šeit failu root.jsx. Šis būs mūsu vietnes sakne: kreisajā pusē mums būs izvēlne, labajā pusē - saturs (pagaidām mums šeit ir tikai virsraksts):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Produkti</a>
					<a>Pārdevēji</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Šī ir mana pirmā Redux lietotne!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Un komponentu App mēs pārveidosim. Sākumā pilnībā izdzēsīsim tā saturu. Tad importēsim divas funkcijas maršrutētājam un mūsu saknes komponentu Root:

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

Zemāk aiz importa izveidosim maršrutētāju, un ierakstīsim pirmo maršrutu, padodot tam mūsu Root kā attēlojamo elementu un, attiecīgi, iestatot ceļu uz '/'. Turpmāk App mēs pievienosim arī citus nepieciešamos maršrutus:

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

Zemāk uzrakstīsim funkcijas App kodu:

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

export default App

Viss. Palaižam. Nākamajā sadaļā mēs realizēsim komponentus Redux lietotnes darbam.

Beigās pievienosim mazliet skaistuma, norakstot tam stilus 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;
}

Pievienojiet React Router savai lietotnei.

Lai jūsu lietotne attiecas uz studentiem, par kuriem informāciju ievietos pasniedzēji. Ņemot to vērā, izveidojiet saknes komponentu Root. Pārveidojiet komponentu App kā aprakstīts nodarbībā.