Redux тиркемесине React Router орнотуу

Өткөн сабактарда биз Redux менен иштөө үчүн негизги куралдарды орноттук. Көп учурда тиркемеге анын web-баракчалары боюнча навигация үчүн маршруттоочу керек болот жан биздин тиркеме дагы көрсөтмө болбойт. Бул үчүн биз 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 компонентин сабакта сүрөттөлгөндөй өзгөртүңүз.