Redux programma üçin React Router gurnamak

Öňki sapaklarda biz Redux bilen işlemek üçin esasy gurallary gurnadyk. Köplenç programmanyň web sahypalary boýunça nawigasiýa üçin bir marşruta dolandyryjysyna möhtajçygy ýüze çykýar we bizimiň programmamyz hem şuňa goşulmaz. Bu maksat üçin biz React Router kitaphanasyny gurnarys.

Bizimiň taslamamyzy açarys we terminala aşakdaky buýrugy ýazarys:

npm install react-router-dom

Biraz öňe ýöreň, aýdýaryn, bizimiň Redux programmamyz geleneksional ýönde önümler we olar hakdaky maglumat satyjylar tarapyndan ýerleşdirilýänligi barada. Şonuň üçin indi biz esasy App komponentini birneme üýtgetmeli we programma marşrutlaşdyrma amallaryny amala aşyrmak üçin funksiýalary goşmaly.

Başlangyçda src papkasyna, soňra bolsa app papkasyna gireris we bu ýerde root.jsx faýly dörederis. Bu sahypamyzyň köki bolar: çep tarapynda bizimiň menýu, sag tarapynda bolsa mazmun (häzirki wagtda bu ýerde diňe atly ýazgy bar) bolmaly:

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

We App komponentini üýtgederis. Başlangyçda onuň mazmunyny doly aýyryň. Soňra router üçin iki funksiýany we bizimiň esasy Root komponentini import ediň:

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

Aşakda, importdan soň, router dörediň we ilkinji marşruty ýazyp, oňa görkezilýän element hökmünde bizimiň Root-i beriň we degişlilikde ýoluny '/' ediň. Indiki etapda biz App-a gerekli beýleki marşrutlary goşarys:

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

Aşakda App funksiýasynyň koduny ýazarys:

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

export default App

Hemmesi. Start beriň. Indiki bölümde biz Redux programmasy üçin komponentleri amala aşyrarys.

Ahyrsoňy, owadanlyk goşup, index.css-da şu stilýeri ýazarys:

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

Programmanyza React Router goşuň.

Programmanyzyň talyplar hakda bolmagyny we olar hakdaky maglumatlary mugallymlaryň ýerleşdirilmelidigini göz öňünde tutuň. Şonuň esasynda, esasy Root komponentini dörediň. App komponentini sapakda beýan edilişi ýaly üýtgediň.