//App.js
import PrivateRoute from "PrivateRoute";
...
return (
...
<Routes>
<Route exact path='/login' element={<Login/>}/>
<Route exact path='/' element={<PrivateRoute component={HomePage}/>}/>
</Routes>
...
)
//PrivateRoute.js
export default function PrivateRoute({ component: Component, ...rest }) {
const isLogged = false;
// If authorized, return an outlet that will render child elements
// If not, return element that will navigate to login page
return isLogged ? <Component/> : <Navigate to="/login" />;
}
<Route exact path="/" element={<><AddTodo addTodo={addTodo} /><Todos todos={todos} onDelete={onDelete} /></>} />