Насби React Router дар барномаи Redux

Дар дарсҳои гузашта мо асбобҳои асосиро барои кор бо Redux насб кардем. Аксар вақт руй медиҳад, ки барнома ба роутер барои навигатсия дар саҳифаҳои веби худ ниёз дорад ва барномаи мо истисно нахоҳад буд. Барои ин мо китобхонаи React Router-ро насб мекунем.

Лоиҳаи худро кушода ва дар терминал фармони зеринро мезанем:

npm install react-router-dom

Як каме пеш рафта, мегӯям, ки барномаи Redux-и мо анъанатан ба маҳсулот бахшида шудааст, маълумоти дар бораи онҳо аз ҷониби баъзе фурӯшандаҳо гузошта мешавад. Аз ин рӯ, ҳоло мо каме компоненти асосии App-ро тағир медиҳем, ва инчунин ба барнома функсионал барои амалӣ намудани руткуниро илова мекунем.

Барои оғоз ба папкаи src, сипас ба app дохил шуда, дар инҷо файли root.jsx-ро эҷод мекунем. Ин решаи сомонаи мо хоҳад буд: дар чап мо меню дорем, ва дар рост - мундариҷа (то ҳол дар инҷо танҳо сарлавҳа мавҷуд аст):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Маҳсулот</a>
					<a>Фурӯшандагон</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Ин аввалин барномаи Redux-и ман аст!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Ва компоненти App-ро мо тағир медиҳем. Барои оғоз мумкияти онро пурра нест мекунем. Баъд аз он ду функсияро барои рутер ва компоненти решаии худ Root-ро импорт мекунем:

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

Дар поён, пас аз импорт, рутер эҷод карда, як роҳи аввалро навишта, ба он Root-и худро ҳамчун унсури намоишдиҳанда интиқол медиҳем ва, мувофиқан, роҳро ба '/' таъин мекунем. Дар оянда дар App мо илова карда меравем ва дигар роҳҳои зарурӣ:

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

Дар поён коди функсияи App-ро менависем:

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

export default App

Ҳама чиз. Оғоз мекунем. Дар бахши оянда мо компонентҳоро барои коркарди барномаи Redux амалӣ хоҳем кард.

Дар хотима каме зебоӣ илова карда, барои ин стилҳоро дар 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;
}

React Router-ро ба барномаи худ илова кунед.

Бигзор барномаи шумо дар бораи донишҷӯён бошад, маълумоти дар бораи онҳоро муаллимон мегузоранд. Инро назардошт гирифта, компоненти решаии Root-ро эҷод кунед. Компоненти App-ро тавре ки дар дарс тавсиф шудааст, тағир диҳед.