React Routerни Redux иловасига ўрнатиш

Олдинги дарсларда биз Redux билан ишлаш учун асосан асбобларни ўрнатган эдик. Кўпинча иловага унинг web-саҳифалари бўйича навигация қилиш учун маршрутизатор керак бўлади ва бизнинг иловамиз ұндa ҳам истисно бўлмайди. Бунинг учун биз React Router кутубхонасини ўрнатамиз.

Лойиҳамизни ochамиз ва терминалда куйидаги буйруқни киритамиз:

npm install react-router-dom

Бир оз олдинга yұриб aйтиш керакки, бизнинг Redux иловамиз анъанавий равишда маҳсулотларга бағишланган бўлиб, улар ҳақидаги маълумотлар бирор сотивчилар томониidan чоп этилади. Шунинг учун ҳозир биз асосий App компонентини бир оз ўзгартирамиз, шунингдек, иловага маршрутизацияни амалга ошириш учун функционал қўшамиз.

Бошлаш учун src папкасига, сўнгра app папкасига кирамиз ва бу ерда root.jsx файлини яратамиз. Бу сайтимизнинг илдизи бўлади: чап томонида бизда меню, ўнг томонида - контент (ҳозирча бизда фақат сарлавҳа бор):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Products</a>
					<a>Sellers</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 компонентини дарста тавсифланганидек ўзгартиринг.