Μορφοποίηση URL και Routing στο React- Οδηγός χρήσης React Router

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

 

Εγκαθιστώ React Router

Ανοίξτε τον κατάλογο του έργου σας στο τερματικό και εκτελέστε την ακόλουθη εντολή για εγκατάσταση: React Router npm install react-router-dom

Εισαγάγετε τα απαραίτητα στοιχεία από το στοιχείο React. React Router

 

Καθορισμός Διαδρομών

Χρησιμοποιήστε το στοιχείο για να αναδιπλώσετε την εφαρμογή React και να ορίσετε μια βασική μορφή URL. <BrowserRouter>

Χρησιμοποιήστε το <Route> στοιχείο για να ορίσετε διαδρομές στην εφαρμογή σας.

Παράδειγμα:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

 

Ορίστε Link το s

Χρησιμοποιήστε το στοιχείο για να δημιουργήσετε πλοήγηση στην εφαρμογή σας. <Link> link

Παράδειγμα:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

 

Παράμετροι διαδρομής πρόσβασης

Χρησιμοποιήστε το <Route> στοιχείο με ένα path χαρακτηριστικό στη μορφή /users/:id για πρόσβαση στις παραμέτρους διαδρομής.

Μέσα στο στοιχείο που ορίζεται από το <Route>, μπορείτε να το χρησιμοποιήσετε useParams() για πρόσβαση στις τιμές των παραμέτρων διαδρομής.

Παράδειγμα:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

Χρήση Switch και Redirect

Χρησιμοποιήστε το στοιχείο για να αποδώσετε μόνο την πρώτη διαδρομή που ταιριάζει με τη διαδρομή. <Switch>

Χρησιμοποιήστε το στοιχείο σε χρήστες από μια καθορισμένη διαδρομή σε μια άλλη. <Redirect> redirect

Παράδειγμα:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

 

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