React:Router

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes, Navigate, useNavigate } from 'react-router-dom';
import NotFound from './NotFound';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Accueil</Link></li>
            <li><Link to="/about">À Propos</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<Navigate to="/404" />} />
          <Route path="/404" element={<NotFound />} />
        </Routes>
      </div>
    </Router>
  );
};
export default App;

// Home.js
export default function Home(){ 
return( <h2>Accueil</h2>;)
}

// About.js
export default function About(){
	return( <h2>À Propos</h2>;);
}

// Contact.js
export default function Contact () {
  const navigate = useNavigate();

  const retourAaceuil = () => {
    // Navigation vers la page d'accueil
    navigate('/');
  }
  return (
    <div>
      <h2>Contactez-nous</h2>
      <button onClick={retourAaceuil}>Aller à l'accueil</button>
    </div>
  );
}

// NotFound.js
export default function NotFound() {
	return(<h2>Page non trouvée</h2>);
}

// App.js

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link, Routes, Navigate, useNavigate } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Products from './Products';
import ProductDetails from './ProductDetails';
import NotFound from './NotFound';
const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Accueil</Link></li>
            <li><Link to="/about">À Propos</Link></li>
            <li><Link to="/contact">Contact</Link></li>
            <li><Link to="/products">Produits</Link></li>
          </ul>
        </nav>


        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:productId" element={<ProductDetails />} />
          <Route path="*" element={<Navigate to="/404" />} />
          <Route path="/404" element={<NotFound />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

// Products.js
const Products = () => {
  const navigate = useNavigate();

  const handleProductClick = (productId) => {
    // Navigation vers la page de détails du produit
    navigate(`/products/${productId}`);
  };

  return (
    <div>
      <h2>Produits</h2>
      <ul>
        <li onClick={() => handleProductClick(1)}>Produit 1</li>
        <li onClick={() => handleProductClick(2)}>Produit 2</li>
      </ul>
    </div>
  );
};
export default Products;

// ProductDetails.js
const ProductDetails = ({ productId }) => {
  return <h2>Détails du Produit {productId}</h2>;
};
export default ProductDetails;

// NotFound.js
export default function NotFound() {
	return(<h2>Page non trouvée</h2>);
}