React Router è una libreria di routing per React che permette di creare un’applicazione web single-page con la navigazione di più viste.
La prima cosa che devi fare è installare la libreria di React Router. Puoi farlo utilizzando npm o yarn:
```
npm install react-router-dom
#or
yarn add react-router-dom
```
Successivamente, è necessario importare la libreria React Router nel tuo file JavaScript:
```
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
```
Una volta importato, puoi iniziare a creare rotte nel tuo componente. Ecco un esempio di come potrebbe apparire nel tuo codice:
```
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import Home from ‘./pages/Home’;
import About from ‘./pages/About’;
import Contact from ‘./pages/Contact’;
function App() {
return (
}
export default App;
```
In questo esempio, ci sono tre rotte: Home, About e Contact. L’attributo “path” determina l’URL del percorso e il componente che verrà renderizzato quando l’utente visita quel percorso.
Il componente `Switch` è usato per contenere le `Route`. Questo è utile perché renderizza solo la prima `Route` o `Redirect` che corrisponde alla posizione corrente. Se non usiamo il `Switch`, ogni `Route` corrispondente verrà renderizzata.
Nell’esempio, l’attributo `exact` è utilizzato per garantire che la `Route` venga renderizzata solo quando il percorso è esattamente “/”. Senza `exact`, la `Route` per “/” verrebbe renderizzata anche per “/about” e “/contact”, poiché entrambi iniziano con “/”.
È importante notare che i percorsi sono nel loro ordine nell’interfaccia utente solo a scopo leggibilità. React Router utilizza un algoritmo che fa corrispondere il primo percorso che coincide con la posizione dell’utente, non l’ordine in cui sono nell’interfaccia utente.
