Redux ilovasiga React Router o'rnatish

Oldingi darslarda biz Redux bilan ishlash uchun asosiy vositalarni o'rnatdik. Ko'pincha ilova o'zining veb-sahifalari bo'yicha navigatsiya qilish uchun marshrutizatorga muhtoj bo'ladi va bizning ilovamiz undan mustasno emas. Buning uchun biz kutubxonani o'rnatamiz React Router.

Loyihamizni ochamiz va terminalda quyidagi buyruqni teramiz:

npm install react-router-dom

Bir oz oldinga suzib, aytaman, bizning Redux ilovamiz an'anaviy ravishda mahsulotlarga bag'ishlanadi, ular haqidagi ma'lumot ayrim sotuvchilar tomonidan joylashtiriladi. Shuning uchun hozir biz bir oz asosiy App komponentini qayta qilamiz, va shuningdek ilovaga marshrutlashtirishni amalga oshirish uchun funktsionallik qo'shamiz.

Boshlash uchun src papkasiga, keyin esa app papkasiga kiramiz va bu yerda root.jsx faylini yaratamiz. Bu bizning saytimizning ildizi bo'ladi: chap tomonda bizda menyu, o'ng tomonda esa - kontent (hozircha bizda bu yerda faqat sarlavha):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Mahsulotlar</a>
					<a>Sotuvchilar</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Bu mening birinchi Redux ilovam!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

App komponentini esa biz qayta qilamiz. Boshlash uchun uning tarkibini butunlay o'chiramiz. Keyin router uchun ikkita funktsiyani va bizning ildiz komponentimiz Root ni import qilamiz:

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

Importdan keyin quyida router yaratamiz, va birinchi marshrutni yozamiz, unga bizning Root ni ko'rsatiladigan element sifatida o'tkazamiz va, mos ravishda, yo'lni '/' ga o'rnatamiz. Keyingi bosqichlarda App ga biz qo'shamiz va boshqa zarur marshrutlarni:

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

Quyida App funksiyasi kodini yozamiz:

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

export default App

Hammasi. Ishga tushiramiz. Keyingi bo'limda biz Redux ilovasi bilan ishlash uchun komponentlarni amalga oshiramiz.

Yakunida bir oz go'zallik qo'shamiz, buning uchun index.css da uslublarni yozib:

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

Ilovangizga React Router qo'shing.

Ilovangiz talabalarga tegishli bo'lsin, ular haqidagi ma'lumotni o'qituvchilar joylashtiradi. Buni hisobga olgan holda, ildiz komponenti Root ni yarating. App komponentini darsda tasvirlanganidek qayta qiling.