Προσθήκη Router στο React Router

Έχοντας εξοικειωθεί λίγο με τα routers, μπορούμε να προσθέσουμε ένα στην εφαρμογή μας.

Αλλά πρώτα, χρειάζεται να καθαρίσουμε λίγο το πρότυπο της εφαρμογής μας, που δημιουργήσαμε στα προηγούμενα μαθήματα. Πιο συγκεκριμένα - ας ασχοληθούμε με το φάκελο src. Πετάξτε από αυτόν το φάκελο assets, τα αρχεία App.css, App.jsx. Γενικά, θα πρέπει να μείνουν μόνο τα main.jsx και index.css.

Ανοίξτε το index.css και καθαρίστε το πλήρως. Αφήστε το κενό.

Τώρα ας ασχοληθούμε με το κύριο αρχείο μας main.jsx. Θα έχει τον ακόλουθο κώδικα:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Και τώρα μπορούμε να προσθέσουμε το router. Θα χρησιμοποιήσουμε το BrowserRouter, αφού χρησιμοποιείται πιο συχνά στις εφαρμογές web. Ας μην ξεχάσουμε και τη σύγχρονη σύνταξη. Θα προσθέσουμε μια γραμμή εισαγωγής:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Στη συνέχεια, θα δημιουργήσουμε μια σταθερά router και θα δημιουργήσουμε το BrowserRouter μας μετά από τις γραμμές εισαγωγής. Θα το κάνουμε έτσι ώστε στην κύρια σελίδα να εμφανίζεται ένα div με την επιγραφή 'Hello Router!'. Για αυτό, θα ορίσουμε τη διαδρομή για την κύρια σελίδα και το στοιχείο που θα εμφανίζουμε:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Επίσης, πρέπει να προσθέσουμε το component RouterProvider και να περάσουμε το router που δημιουργήσαμε παραπάνω. Αυτό δέχεται όλα τα αντικείμενα του router, αποδίδει την εφαρμογή μας και συνδέει άλλα API:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Ο πλήρης κώδικας θα μοιάζει με αυτόν:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Ας αποθηκεύσουμε τις αλλαγές. Συγχαρητήρια! Η εφαρμογή μας δεν παραπονιέται πλέον. Τώρα, αν την εκκινήσουμε, θα δούμε 'Hello Router!' στην κύρια σελίδα του browser.

Χρησιμοποιώντας το υλικό που παρουσιάστηκε, φροντίστε ώστε στην κύρια σελίδα της εφαρμογής σας, που δημιουργήσατε στις εργασίες για τα προηγούμενα μαθήματα, να εμφανίζεται μια παράγραφος με το κείμενο 'I'm number one in React!'.