Инсталација на 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 како што е опишано во лекцијата.