ERREUR: [privateoute] n'est pas un composant <itinéraire>. Tous les composants enfants des <itinéraires> doivent être un <itinéraire> ou <réact.fragment>

Question

J'utilise React Router V6 et crée des itinéraires privés pour ma demande.

Dans privateatoute.js, j'ai code

import React from 'react';
import {Route,Navigate} from "react-router-dom";
import {isauth}  from 'auth'

function PrivateRoute({ element, path }) {
  const authed = isauth() // isauth() returns true or false based on localStorage
  const ele = authed === true ? element : <Navigate to="/Home"  />;
  return <Route path={path} element={ele} />;
}

export default PrivateRoute

et dans la route.js j'ai écrit comme

 ...
<PrivateRoute exact path="/" element={<Dashboard/>}/>
<Route exact path="/home" element={<Home/>}/>

J'ai traversé le même exemple https://stackblitz.com/github/remix-run/react-router/tree/Main/examples/auth?file=src/app.tsx

Y a-t-il quelque chose qui me manque merci.

Answer 1

Pour des éléments plus longs

        <Router>
        <div>
            <Navbar totalItems={cart.total_items}/>
            <Routes>
                <Route exact path='/'>
                    <Route exact path='/' element={<Products products={products} onAddToCart={handleAddToCart}/>}/>
                </Route>
                <Route exact path='/cart'>
                    <Route exact path='/cart' element={<Cart cart={cart}/>}/>     
                </Route>
            </Routes>
        </div>
    </Router>