ITIS G. RIVOIRA - IIS Denina Pellico Rivoira

Hooks useNaviagte

Lo useNavigate ti consente di passare da un componente all’altro all’interno di una funzione

Esempio di un possibile utilizzo

File App.js

						
import React from 'react'
import {Route, BrowserRouter, Routes} from "react-router-dom"

//IMPORTO I COMPONENTI
import Home from "./Home"
import MiaNavbar from "./MiaNavbar"
import ChiSiamo from './ChiSiamo'
import DoveSiamo from './DoveSiamo'

const App = () => {

    //RETURN --> Stampa a video
    return (
        <div>
            <h1>React router dom</h1>

            <BrowserRouter>
		{/* NAVBAR PER LA NAVIGAZIONE (sono obbilgato a inserira dentro a BrowserRouter!)*/}
		<MiaNavbar />

                {/* ROUTES (collegamenti)*/}
                <Routes>
                    {/* Aggiungo una route per ogni componente da inserire */}
                    {/* element={}  -->   Elemento da inserire (devo prima importarlo) */}
                    {/* path={}     -->   Percorso dell'URL in cui inserirlo */}
                    {/* es. Home sarà a http://localhost:3000, ChiSiamo si troverà a http://localhost:3000/ChiSiamo */}
                    <Route element={<Home />} path={"/"}/>
                    <Route element={<ChiSiamo />} path={"/ChiSiamo"}/>
                    <Route element={<DoveSiamo />} path={"/DoveSiamo"}/>
                </Routes>
            </BrowserRouter>
            
        </div>
    )
}

export default App
						
					

File MiaNavbar.js

						
import React from 'react'
import {NavLink, useNavigate} from "react-router-dom"

const MiaNavbar = () => {

    //DICHIARAZIONE DELLO useNavigate
    const pippo = useNavigate()

    //FUNZIONE APRI (richiamata alla pressione del button)
    const apri =() => {
        console.log("FUNZIONE APRI (pressione del button)")
        pippo("/ChiSiamo")
    }

    //RETURN --> Stampa a video
    return (
        <div>
		{/* Navbar */}
		<NavLink to={"/"}>HOME</NavLink><br/>
		<NavLink to={"/ChiSiamo"}>Chi siamo ?</NavLink><br/>
		<NavLink to={"/DoveSiamo"}>Dove siamo ?</NavLink><br/>

		{/* Equivalente del cliccare la fraccie indietro (<--) del browser, torna al componente aperto precedentemente */} 
       		<NavLink to={-1}>INDIETRO</NavLink><br/>

		{/* Button */}
        	<input type="button" value="API" onClick={apri}/>
        </div>
    )
}

export default MiaNavbar