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 компонентін сабақта сипатталғандай өзгертіңіз.