close

Formattazione URL e Routing in React- Una guida all'uso React Router

In un'applicazione React, la formattazione dell'URL e routing svolge un ruolo cruciale nella navigazione delle pagine e nella visualizzazione del contenuto corrispondente. Per gestire routing in React, possiamo usare la libreria. Ecco una guida di base su come utilizzare per formattare gli URL e gestirli nella tua applicazione React. React Router React Router routing

 

Installare React Router

Apri la directory del tuo progetto nel terminale ed esegui il seguente comando per installare: React Router npm install react-router-dom

Importa i componenti necessari dal tuo componente React. React Router

 

Definisci percorsi

Usa il componente per avvolgere la tua applicazione React e impostare un formato URL di base. <BrowserRouter>

Utilizza il <Route> componente per definire i percorsi nella tua applicazione.

Esempio:

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

 

Definisci Link S

Utilizza il componente per creare messaggi di navigazione nella tua applicazione. <Link> link

Esempio:

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

 

Parametri del percorso di accesso

Utilizzare il <Route> componente con un path attributo nel formato /users/:id per accedere ai parametri del percorso.

All'interno del componente definito da <Route>, è possibile utilizzare useParams() per accedere ai valori dei parametri del percorso.

Esempio:

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

 

Usa Switch e Redirect

Utilizza il componente per eseguire il rendering solo del primo percorso che corrisponde al percorso. <Switch>

Utilizzare il componente per gli utenti da un percorso specificato a un altro. <Redirect> redirect

Esempio:

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

 

Questi sono alcuni concetti di base della formattazione dell'URL e routing in React usando. Utilizzando, puoi creare applicazioni React flessibili con la possibilità di navigare e visualizzare vari contenuti in base all'URL. React Router React Router