Εγκατάσταση του React Router σε μια εφαρμογή Redux

Στα προηγούμενα μαθήματα εγκαταστήσαμε τα βασικά εργαλεία για εργασία με το Redux. Συχνά συμβαίνει μια εφαρμογή να χρειάζεται έναν δρομολογητή για πλοήγηση στις ιστοσελίδες της και η εφαρμογή μας δεν θα γίνει εξαίρεση. Για αυτό θα εγκαταστήσουμε τη βιβλιοθήκη React Router.

Ας ανοίξουμε το project μας και πληκτρολογήσουμε στο terminal την ακόλουθη εντολή:

npm install react-router-dom

Προχωρώντας λίγο μπροστά, θα πω ότι η εφαρμογή Redux μας είναι παραδοσιακά αφιερωμένη σε προϊόντα, πληροφορίες για τα οποία δημοσιεύονται από ορισμένους πωλητές. Επομένως, τώρα θα αλλάξουμε λίγο το κύριο στοιχείο App, και επίσης θα προσθέσουμε λειτουργικότητα στην εφαρμογή για πραγματοποίηση δρομολόγησης.

Για να ξεκινήσουμε, ας πάμε στο φάκελο src, και μετά στο app και ας δημιουργήσουμε εδώ το αρχείο root.jsx. Αυτό θα είναι η ρίζα του site μας: αριστερά θα έχουμε ένα μενού, και δεξιά - το περιεχόμενο (προς το παρόν έχουμε εδώ μόνο μια επικεφαλίδα):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Products</a>
					<a>Sellers</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>This is my first Redux app!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Και το στοιχείο App θα το τροποποιήσουμε. Αρχικά ας διαγράψουμε πλήρως το περιεχόμενό του. Μετά ας εισάγουμε δύο συναρτήσεις για το router και το ριζικό μας στοιχείο Root:

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

Πιο κάτω μετά την εισαγωγή θα δημιουργήσουμε το router, και θα ορίσουμε την πρώτη διαδρομή, περνώντας του το 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 όπως περιγράφεται στο μάθημα.