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