Πώς να χρησιμοποιήσετε το React Router V6: Οδηγός για αρχάριους

Το React Router είναι η πιο δημοφιλής βιβλιοθήκη που μπορείτε να χρησιμοποιήσετε για να εφαρμόσετε δρομολόγηση σε εφαρμογές React. Παρέχει μια προσέγγιση βασισμένη σε στοιχεία για το χειρισμό μιας ποικιλίας εργασιών δρομολόγησης, συμπεριλαμβανομένης της πλοήγησης στη σελίδα, των παραμέτρων ερωτήματος και πολλών άλλων.

Το React Router V6 εισάγει ορισμένες σημαντικές αλλαγές στον αλγόριθμο δρομολόγησης, για να αντιμετωπίσει παγίδες που υπήρχαν στην προηγούμενη έκδοσή του και να παρέχει μια βελτιωμένη λύση δρομολόγησης.

Ξεκινώντας με τη δρομολόγηση χρησιμοποιώντας το React Router V6

Για να ξεκινήσετε, δημιουργήστε μια εφαρμογή React. Εναλλακτικά, ρυθμίστε ένα έργο React χρησιμοποιώντας το Vite. Αφού δημιουργήσετε το έργο, προχωρήστε και εγκαταστήστε το react-router-dom πακέτο.

npm install react-router-dom

Δημιουργία διαδρομών με χρήση του δρομολογητή React

Για να δημιουργήσετε διαδρομές, ξεκινήστε τυλίγοντας ολόκληρη την εφαρμογή με ένα

BrowserRouter συστατικό. Ενημερώστε τον κωδικό στο δικό σας index.jsx ή main.jsx αρχείο ως εξής:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

Η αναδίπλωση του στοιχείου εφαρμογής με το στοιχείο BrowserRouter διασφαλίζει ότι ολόκληρη η εφαρμογή αποκτά πρόσβαση στο πλαίσιο δρομολόγησης και τις δυνατότητες που προσφέρονται από τη βιβλιοθήκη του React Router.

Χρήση του στοιχείου Routes

Αφού ολοκληρώσετε την εφαρμογή με το στοιχείο BrowserRouter, μπορείτε να ορίσετε τις διαδρομές σας.

ο Διαδρομές συστατικό είναι μια βελτίωση του Διακόπτης στοιχείο που χρησιμοποιήθηκε προηγουμένως από το React Router v5. Αυτό το στοιχείο υποστηρίζει τη σχετική δρομολόγηση, την αυτόματη κατάταξη διαδρομής και τη δυνατότητα εργασίας με ένθετες διαδρομές.

Συνήθως, θα προσθέτετε διαδρομές στο υψηλότερο επίπεδο της εφαρμογής σας, συχνά εντός του στοιχείου της εφαρμογής. Ωστόσο, μπορείτε να τα ορίσετε σε οποιαδήποτε άλλη θέση, ανάλογα με τη δομή του έργου σας.

Ανοιξε το App.jsx αρχειοθετήστε και αντικαταστήστε τον κωδικό React του boilerplate με το ακόλουθο:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Αυτή η διαμόρφωση δρομολόγησης αντιστοιχίζει συγκεκριμένες διαδρομές URL στα αντίστοιχα στοιχεία σελίδας (Πίνακας ελέγχου και About), διασφαλίζοντας ότι η εφαρμογή αποδίδει το κατάλληλο στοιχείο όταν ένας χρήστης επισκέπτεται ένα συγκεκριμένο στοιχείο URL.

Παρατηρήστε το στοιχείο prop, εντός του στοιχείου Route, το οποίο σας επιτρέπει να μεταβιβάσετε ένα λειτουργικό στοιχείο σε αντίθεση με το όνομα μόνο του στοιχείου. Αυτό καθιστά δυνατή τη διέλευση των στηρίξεων στις διαδρομές και τα σχετικά στοιχεία τους.

Στο src κατάλογο, δημιουργήστε ένα νέο σελίδες κατάλογο και προσθέστε δύο νέα αρχεία: Dashboard.jsx και About.jsx. Προχωρήστε και ορίστε λειτουργικά στοιχεία σε αυτά τα αρχεία για να δοκιμάσετε τις διαδρομές.

Χρησιμοποιώντας το createBrowserRouter για να ορίσετε διαδρομές

Τεκμηρίωση του δρομολογητή React συνιστά τη χρήση του createBrowserRouter στοιχείο για τον καθορισμό της διαμόρφωσης δρομολόγησης για τις εφαρμογές web React. Αυτό το εξάρτημα είναι μια ελαφριά εναλλακτική BrowserRouter το οποίο παίρνει ως επιχείρημά του μια σειρά διαδρομών.

Χρησιμοποιώντας αυτό το στοιχείο, δεν χρειάζεται να ορίσετε τις διαδρομές σας εντός του στοιχείου της εφαρμογής. Αντίθετα, μπορείτε να περιγράψετε όλες τις διαμορφώσεις διαδρομής σας εντός του index.jsx ή main.jsx αρχείο.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε αυτό το στοιχείο:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

Η διαμόρφωση δρομολόγησης χρησιμοποιεί το createBrowserRouter και RouterProvider στοιχεία για τη δημιουργία ενός συστήματος δρομολόγησης για μια εφαρμογή React.

Ωστόσο, η μόνη διαφορά με αυτήν την υλοποίηση είναι ότι, αντί να τυλίξει την εφαρμογή χρησιμοποιώντας το στοιχείο BrowserRouter, χρησιμοποιεί το RouterProvider συστατικό για να περάσει το Δρομολογητής πλαίσιο σε όλα τα στοιχεία της εφαρμογής.

Εφαρμογή Διαδρομών Σελίδας-Μη Βρέθηκαν

ο μονοπάτι Το prop στο στοιχείο Route συγκρίνει την παρεχόμενη διαδρομή με την τρέχουσα διεύθυνση URL για να προσδιορίσει εάν υπάρχει αντιστοιχία πριν από την απόδοση του απαιτούμενου στοιχείου.

Για να χειριστείτε περιπτώσεις όπου δεν ταιριάζουν διαδρομές, μπορείτε να δημιουργήσετε μια συγκεκριμένη διαδρομή που θα διαχειρίζεται Σφάλματα 404 δεν βρέθηκαν. Η συμπερίληψη αυτής της διαδρομής διασφαλίζει ότι οι χρήστες μπορούν να λαμβάνουν ουσιαστικές απαντήσεις σε περιπτώσεις όπου έχουν πρόσβαση σε μια ανύπαρκτη διεύθυνση URL.

Για να εφαρμόσετε μια διαδρομή 404, προσθέστε αυτήν τη διαδρομή στο στοιχείο Διαδρομές:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Στη συνέχεια, δημιουργήστε ένα έθιμο NotFound.jsx συστατικό και τέλος, στυλ του στοιχείου χρησιμοποιώντας μονάδες CSS.

Ο αστερίσκος (*) είναι ένας χαρακτήρας μπαλαντέρ που χειρίζεται σενάρια όπου καμία από τις καθορισμένες διαδρομές δεν ταιριάζει με την τρέχουσα διεύθυνση URL.

Πλοήγηση μέσω προγραμματισμού Χρησιμοποιώντας το useNavigate Hook

ο χρήση Πλοήγηση Το hook παρέχει έναν προγραμματικό τρόπο χειρισμού της πλοήγησης σε εφαρμογές. Αυτό το άγκιστρο είναι ιδιαίτερα χρήσιμο όταν θέλετε να ενεργοποιήσετε την πλοήγηση ως απόκριση σε αλληλεπιδράσεις ή συμβάντα χρηστών, όπως κλικ κουμπιών ή υποβολές φορμών.

Ας ρίξουμε μια ματιά στον τρόπο χρήσης του χρήση Πλοήγηση άγκιστρο για πλοήγηση μέσω προγραμματισμού. Υποθέτοντας ότι δημιουργήσατε το About.jsx λειτουργικό στοιχείο, εισαγάγετε το άγκιστρο από το πακέτο React Router:

import { useNavigate } from'react-router-dom';

Στη συνέχεια, προσθέστε ένα κουμπί που, όταν κάνετε κλικ, ενεργοποιεί την πλοήγηση σε μια καθορισμένη διαδρομή.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Αξίζει να αναφέρουμε ότι το useNavigate hook και το useNavigation hook, που παρουσιάστηκαν στο React Router v6, εξυπηρετούν διαφορετικούς σκοπούς παρά τα στενά συνδεδεμένα ονόματά τους.

Το άγκιστρο useNavigation σάς δίνει τη δυνατότητα πρόσβασης σε λεπτομέρειες που σχετίζονται με την πλοήγηση, όπως η κατάσταση πλοήγησης σε εξέλιξη και άλλες λεπτομέρειες. Αυτό είναι χρήσιμο όταν θέλετε να αποδώσετε στοιχεία διεπαφής χρήστη, όπως η φόρτωση περιστρεφόμενων, για να παρέχετε οπτικά σχόλια σχετικά με τις τρέχουσες διαδικασίες.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το άγκιστρο useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

Σε αυτό το παράδειγμα, το Κουμπί υποβολής Το στοιχείο θα ενημερώνει δυναμικά το κείμενό του με βάση την κατάσταση πλοήγησης που προκύπτει από το άγκιστρο useNavigation.

Παρόλο που αυτά τα άγκιστρα έχουν διαφορετικούς ρόλους, μπορείτε να τα χρησιμοποιήσετε μαζί. Το άγκιστρο useNavigate για την έναρξη της διαδικασίας πλοήγησης και useNavigation hook για ανάκτηση λεπτομερειών πλοήγησης σε πραγματικό χρόνο, οι οποίες στη συνέχεια καθοδηγούν το είδος της διεπαφής χρήστη σχολίων που θα αποδοθεί στο πρόγραμμα περιήγησης.

Χρησιμοποιώντας το userRoutes Hook

Αυτό το άγκιστρο σάς επιτρέπει να ορίσετε τις διαδρομές διαδρομής παράλληλα με τα αντίστοιχα στοιχεία τους μέσα σε ένα αντικείμενο. Στη συνέχεια, το άγκιστρο χρησιμοποιείται στη συνέχεια για να ταιριάζει με τις διαδρομές και να εμφανίζει τα σχετικά εξαρτήματα.

Ακολουθεί ένα απλό παράδειγμα του τρόπου χρήσης του γάντζου:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

Σε αυτό το παράδειγμα, το διαδρομές Το αντικείμενο ορίζει την αντιστοίχιση των διαδρομών URL στα στοιχεία. ο App Στη συνέχεια, το στοιχείο χρησιμοποιεί αυτό το άγκιστρο για να ταιριάζει με την τρέχουσα διεύθυνση URL και να αποδώσει το κατάλληλο στοιχείο με βάση την αντιστοιχισμένη διαδρομή.

Η χρήση αυτού του άγκιστρου σάς παρέχει λεπτομερή έλεγχο της λογικής δρομολόγησης και σας επιτρέπει να δημιουργείτε εύκολα προσαρμοσμένη λογική διαχείρισης διαδρομής για την εφαρμογή σας.

Χειρισμός δρομολόγησης σε εφαρμογές React

Αν και το ίδιο το React δεν περιλαμβάνει έναν προκατασκευασμένο μηχανισμό για το χειρισμό εργασιών δρομολόγησης, το React Router καλύπτει αυτό το κενό. Παρέχει διάφορα στοιχεία δρομολόγησης και βοηθητικές λειτουργίες που μπορείτε εύκολα να χρησιμοποιήσετε για να δημιουργήσετε διαδραστικές, φιλικές προς το χρήστη εφαρμογές.