Επιλύθηκε: προσθήκη παραμέτρων στο δρομολογητή url react

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

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. Εισαγάγετε το { BrowserRouter as Router, Route, Link, useParams } από το “react-router-dom”;
// Αυτό εισάγει τα στοιχεία από τη βιβλιοθήκη react-router-dom που θα χρησιμοποιηθούν σε αυτόν τον κώδικα.

2. // Αυτό δημιουργεί ένα στοιχείο δρομολογητή που θα χειρίζεται την πλοήγηση μεταξύ διαφορετικών διαδρομών.

3. // Αυτό δημιουργεί μια διαδρομή με μια δυναμική παράμετρο "όνομα χρήστη".

4. // Αυτό αποδίδει το στοιχείο Χρήστης όταν αντιστοιχίζεται αυτή η διαδρομή.

5. John // Αυτό δημιουργεί έναν σύνδεσμο προς τη διαδρομή /user/john που θα αποδώσει το στοιχείο User με το 'john' ως την παράμετρο ονόματος χρήστη όταν κάνετε κλικ.

6. function User() { //Αυτό είναι ένα λειτουργικό στοιχείο που παίρνει το όνομα χρήστη ως όρισμα και το αποδίδει μέσα στις ετικέτες div όταν καλείται κάνοντας κλικ στο σύνδεσμο πάνω από αυτό.

7. let { username } = useParams(); //Αυτό χρησιμοποιεί την καταστροφή για να αποκτήσει πρόσβαση στο όνομα χρήστη από το useParams().

8. επιστροφή (

) //Αυτό επιστρέφει ένα στοιχείο div που περιέχει οποιαδήποτε τιμή μεταβιβάστηκε στο όνομα χρήστη που σε αυτήν την περίπτωση θα ήταν 'john'.

Τι είναι ο δρομολογητής React

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

Παράμετροι στη διεύθυνση URL

Οι παράμετροι στη διεύθυνση URL στο δρομολογητή React επιτρέπουν στους προγραμματιστές να μεταβιβάζουν δυναμικά δεδομένα από τη διεύθυνση URL στα στοιχεία React. Αυτό είναι χρήσιμο για τη δημιουργία δυναμικών διαδρομών που μπορούν να χρησιμοποιηθούν για την εμφάνιση διαφορετικού περιεχομένου με βάση τις παραμέτρους που μεταβιβάζονται στη διεύθυνση URL. Για παράδειγμα, μια διαδρομή όπως το "/user/:id" θα μπορούσε να χρησιμοποιηθεί για την εμφάνιση μιας σελίδας προφίλ χρήστη με μια παράμετρο αναγνωριστικού που έχει περάσει στη διεύθυνση URL. Οι παράμετροι μπορούν επίσης να χρησιμοποιηθούν για φιλτράρισμα δεδομένων ή άλλες λειτουργίες που απαιτούν δυναμικά δεδομένα από τη διεύθυνση URL.

Πώς μπορώ να προσθέσω μια παράμετρο σε μια διεύθυνση URL στο React

Η προσθήκη παραμέτρων σε μια διεύθυνση URL στο React Router γίνεται χρησιμοποιώντας το αντικείμενο "params". Αυτό το αντικείμενο σάς επιτρέπει να μεταβιβάζετε ζεύγη κλειδιών-τιμών που θα προστεθούν στη διεύθυνση URL. Για να προσθέσετε μια παράμετρο, απλώς προσθέστε την στο αντικείμενο παραμέτρων ως εξής:

const params = { param1: 'value1', param2: 'value2' };

Στη συνέχεια, όταν δημιουργείτε τη διαδρομή σας, μπορείτε να περάσετε στο αντικείμενο params ως όρισμα όπως:

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