Για ποιο λόγο χρησιμοποιείται η βιβλιοθήκη react-router-dom στο React;

Το react-router-dom χρησιμοποιείται για την κατασκευή εφαρμογών μιας σελίδας (SPA) στο React, παρέχοντας δρομολόγηση στην πλευρά του πελάτη.

Για τι είναι χρήσιμο;

• Πλοήγηση: Επιτρέπει στους χρήστες να μεταβαίνουν μεταξύ διαφορετικών "σελίδων" (συστατικών) χωρίς πλήρη επαναφόρτωση της σελίδας.
• Διαχείριση URL: Συγχρονίζει το τρέχον URL στη γραμμή διευθύνσεων του προγράμματος περιήγησης με το εμφανιζόμενο συστατικό.
• Δυναμική δρομολόγηση: Επιτρέπει τον ορισμό διαδρομών με παραμέτρους (π.χ., /users/:id) για φόρτωση συγκεκριμένων δεδομένων.
• Προγραμματισμένη πλοήγηση: Επιτρέπει την ανακατεύθυνση του χρήστη μέσω κώδικα (π.χ., μετά την επιτυχή αποθήκευση δεδομένων).

Βασικά συστατικά:

• BrowserRouter: Περιτύλιγμα για την εφαρμογή που χρησιμοποιεί το API History για συγχρονισμό URL.
• Routes: Κάδος για τον ορισμό διαδρομών.
• Route: Ορίζει την αντιστοιχία μεταξύ URL και συστατικού.
• Link: Συστατικό για τη δημιουργία συνδέσμων που αποτρέπουν την επαναφόρτωση της σελίδας.
• useNavigate: Hook για προγραμματισμένη πλοήγηση.
• useParams: Hook για την εξαγωγή παραμέτρων διαδρομής από το URL.

Παράδειγμα χρήσης:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Αρχική</Link> {' '}
        <Link to="/about">Σχετικά</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Παράδειγμα δυναμικής διαδρομής */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;