Come utilizzare React Router V6: una guida per principianti

React Router è la libreria più popolare che puoi utilizzare per implementare il routing nelle applicazioni React. Fornisce un approccio basato su componenti per gestire una varietà di attività di routing, tra cui la navigazione delle pagine, i parametri di query e molto altro.

React Router V6 introduce alcune modifiche significative all'algoritmo di routing, per risolvere le insidie ​​presenti nella versione precedente e fornire una soluzione di routing migliorata.

Iniziare con il routing utilizzando React Router V6

Per iniziare, creare un'applicazione React. In alternativa, impostare un progetto React utilizzando Vite. Dopo aver creato il progetto, vai avanti e installa il file react-router-dom pacchetto.

npm install react-router-dom

Creazione di percorsi utilizzando React Router

Per creare percorsi, inizia avvolgendo l'intera applicazione con un file BrowserRouter componente. Aggiorna il codice nel tuo indice.jsx O main.jsx archiviare come segue:

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>,
)

Il wrapper del componente App con il componente BrowserRouter garantisce che l'intera applicazione abbia accesso al contesto di routing e alle funzionalità offerte dalla libreria React Router.

Utilizzo del componente Routes

Dopo aver avvolto l'applicazione con il componente BrowserRouter, puoi definire i tuoi percorsi.

IL Itinerari componente è un miglioramento del Interruttore componente precedentemente utilizzato da React Router v5. Questo componente supporta il routing relativo, la classificazione automatica dei percorsi e la capacità di lavorare con percorsi nidificati.

In genere, aggiungerai percorsi al livello più alto della tua applicazione, spesso all'interno del componente App. Tuttavia, puoi definirli in qualsiasi altra posizione, a seconda della struttura del tuo progetto.

Apri il App.jsx file e sostituisci il codice React boilerplate con il seguente:

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

Questa configurazione di routing mappa percorsi URL specifici ai componenti della pagina corrispondenti (Dashboard e Informazioni), garantendo che l'app visualizzi il componente appropriato quando un utente visita un particolare URL.

Notare il elemento prop, all'interno del componente Route, che ti consente di passare un componente funzionale anziché solo il nome del componente. Ciò rende possibile il passaggio di oggetti di scena lungo i percorsi e i relativi componenti associati.

Nel src directory, creane una nuova pagine directory e aggiungi due nuovi file: Dashboard.jsx E Informazioni su.jsx. Vai avanti e definisci i componenti funzionali all'interno di questi file per testare i percorsi.

Utilizzo di createBrowserRouter per definire i percorsi

La documentazione di React Router consiglia di utilizzare il creareBrowserRouter componente per definire la configurazione del routing per le applicazioni web React. Questo componente è un'alternativa leggera a BrowserRouter che accetta una serie di percorsi come argomento.

Utilizzando questo componente, non è necessario definire i percorsi all'interno del componente App. Puoi invece delineare tutte le configurazioni del tuo percorso all'interno del file indice.jsx O main.jsx file.

Ecco un esempio di come puoi utilizzare questo componente:

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>
);

La configurazione del routing utilizza il file creareBrowserRouter E RouterProvider componenti per creare un sistema di routing per un'applicazione React.

Tuttavia, l'unica differenza con questa implementazione è che, invece di eseguire il wrapper dell'applicazione utilizzando il componente BrowserRouter, utilizza il file RouterProvider componente per passare il Router contesto a tutti i componenti dell'applicazione.

Implementazione di percorsi di pagina non trovata

IL sentiero prop nel componente Route confronta il percorso fornito con l'URL corrente per determinare se esiste una corrispondenza prima di eseguire il rendering del componente richiesto.

Per gestire i casi in cui nessun percorso corrisponde, è possibile creare un percorso specifico che verrà gestito Errori 404 pagina non trovata. L'inclusione di questo percorso garantisce che gli utenti possano ricevere risposte significative in situazioni in cui hanno avuto accesso a un URL inesistente.

Per implementare una rotta 404, aggiungi questa rotta all'interno del componente Rotte:

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

Quindi, crea un file personalizzato NotFound.jsx componente e, infine, dare uno stile al componente utilizzando i moduli CSS.

L'asterisco (*) è un carattere jolly che gestisce scenari in cui nessuna delle rotte specificate corrisponde all'URL corrente.

Navigazione programmatica utilizzando useNavigate Hook

IL utilizzareNavigate hook fornisce un modo programmatico per gestire la navigazione nelle applicazioni. Questo hook è particolarmente utile quando desideri attivare la navigazione in risposta alle interazioni o agli eventi dell'utente, come i clic sui pulsanti o l'invio di moduli.

Diamo un'occhiata a come utilizzare il file utilizzareNavigate gancio per la navigazione programmatica. Supponendo che tu abbia creato il file Informazioni su.jsx componente funzionale, importa l'hook dal pacchetto React Router:

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

Quindi aggiungi un pulsante che, se cliccato, attiva la navigazione verso un percorso specificato.

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

 </>
 );
}
exportdefault About;

Vale la pena ricordare che l'hook useNavigate e l'hook useNavigation, introdotti in React Router v6, hanno scopi distinti nonostante i loro nomi strettamente correlati.

L'hook useNavigation ti consente di accedere ai dettagli relativi alla navigazione, come lo stato della navigazione in corso e altre specifiche. Ciò è utile quando si desidera eseguire il rendering di elementi dell'interfaccia utente come gli spinner di caricamento per fornire feedback visivo sui processi in corso.

Ecco un esempio di come è possibile utilizzare l'hook 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>;
}

In questo esempio, il Pulsante Invia Il componente aggiornerà dinamicamente il suo testo in base allo stato di navigazione ottenuto dall'hook useNavigation.

Anche se questi ganci hanno ruoli diversi, puoi comunque usarli insieme. L'hook useNavigate per avviare il processo di navigazione e l'hook useNavigation per recuperare i dettagli di navigazione in tempo reale, che quindi guidano il tipo di feedback dell'interfaccia utente da visualizzare nel browser.

Utilizzando l'Hook useRoutes

Questo hook consente di definire i percorsi del percorso insieme ai componenti corrispondenti all'interno di un oggetto. Successivamente il gancio viene utilizzato per abbinare i percorsi e visualizzare i relativi componenti.

Ecco un semplice esempio di come utilizzare l'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;

In questo esempio, il itinerari L'oggetto definisce la mappatura dei percorsi URL ai componenti. IL App il componente utilizza quindi questo hook per abbinare l'URL corrente e visualizzare il componente appropriato in base al percorso corrispondente.

L'utilizzo di questo hook ti offre un controllo granulare sulla logica di routing e ti consente di creare facilmente una logica di gestione del routing personalizzata per la tua applicazione.

Gestione del routing nelle applicazioni React

Sebbene React stesso non includa un meccanismo predefinito per la gestione delle attività di routing, React Router colma questa lacuna. Fornisce vari componenti di routing e funzioni di utilità che è possibile utilizzare facilmente per creare applicazioni interattive e di facile utilizzo.