// App.jsx

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

import Home from './pages/Home';

import About from './pages/About';

import Contact from './pages/Contact';

function App() {

return (

<BrowserRouter>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

<Route path="/contact" element={<Contact />} />

</Routes>

</BrowserRouter>

);

}

function Product() {

const { id } = useParams();

const [product, setProduct] = useState(null);

useEffect(() => {

// Fetch les données avec l'ID

fetch(`/api/products/${id}`)

.then(res => res.json())

.then(setProduct);

}, [id]);

if (!product) return <p>Chargement...</p>;

return (

<div>

<h1>{product.name}</h1>

<p>{product.price} EUR</p>

</div>

);

}

<Route path="/dashboard" element={<Layout />}>

<Route index element={<DashboardHome />} />

<Route path="profile" element={<Profile />} />

<Route path="settings" element={<Settings />} />

</Route>

function ProtectedRoute({ children }) {

const { user } = useAuth(); // Votre contexte d'auth

const navigate = useNavigate();

if (!user) {

return <Navigate to="/login" replace />;

}

return children;

}

function ProductFilters() {

const [searchParams, setSearchParams] = useSearchParams();

const updateFilter = (key, value) => {

const params = new URLSearchParams(searchParams);

if (value) {

params.set(key, value);

} else {

params.delete(key);

}

setSearchParams(params);

};

return (

<select onChange={(e) => updateFilter('category', e.target.value)}>

<option value="">Toutes</option>

<option value="electronics">Électronique</option>

</select>

);

}