0

I have created a login page using RTK query, and i have an Route of login and home page I have created a protected route based on the IsAuthenticated prop and wrapped protected route for home page and added a callback onLogin={handleLogin}

But the error says Login is not component

`Login.js

const [loginUser, { data, isLoading, isError }] = useLoginUserMutation();
useEffect(() => {
if (data?.response === "true" && data?.state === "success"){
setErrorMsg("");
setEmail("");
setPassword("");
setIsAuthenticated(true);
navigate("/home", { state: { user: data?.user } });
}
else if (data?.response === "false" && data.state === "error"){
  setErrorMsg(true);
}
  else{
    setErrorMsg(false)
  }
}, [data,isError,isLoading]);

const handleLogin = async (e) => {
e.preventDefault();
console.log("****")
await loginUser({email,password})

}

App.js

function App() {

const [isAuthenticated, setIsAuthenticated] = useState(false);
const handleLogin = () => {
setIsAuthenticated(true);
}

return (
<div className="App">
  <Router>
    <Routes>
      <Route exact path="/">
        <Login onLogin={handleLogin} />
      </Route>
      <ProtectedRoute path="/home" component={Home} isAuthenticated={isAuthenticated}/>
    </Routes>
  </Router>
</div>
);
}
export default App;

ProtectedRoute.js

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

 const ProtectedRoute = ({ isAuthenticated}) => {
 return isAuthenticated? <Outlet /> : <Navigate to="/" />;
 }

 export default ProtectedRoute;`

I have tried adding the protectedRoute and unable to consume isAutheticated value from Login.js i used protected route to prevent back from login to home or vise versa

R9102
  • 687
  • 1
  • 9
  • 32
  • The `Login` component should be rendered by `Route`, e.g. `} />`. See the marked duplicate for addressing the route protection issue. – Drew Reese Mar 30 '23 at 16:58
  • @Drew Reese But the I need to pass is Authenticated value to check that right,That is not helping me with the solution – R9102 Mar 30 '23 at 17:00
  • Normally you'd store the authentication state in a context or global app state, but passing `isAuthenticated` down as a prop from `App` to `ProtectedRoute` should work. – Drew Reese Mar 30 '23 at 17:01
  • should i use Local Storage to get isAuthenticated value in the protected Route? – R9102 Mar 30 '23 at 17:02
  • `isAuthenticated` is already passed as a prop to `ProtectedRoute`. – Drew Reese Mar 30 '23 at 17:03
  • Still the error – R9102 Mar 30 '23 at 17:04
  • What error are you referring to? If there's more to any issue you are facing can you [edit] the post to include all relevant details, including errors and any code stacktraces? This may include updating to share a more complete [mcve]. – Drew Reese Mar 30 '23 at 17:05
  • const ProtectedRoute = ({ isAuthenticated, component: Component, ...rest }) => { const navigate = useNavigate(); return ( isAuthenticated ? ( ) : ( ) } /> ); }; – R9102 Mar 30 '23 at 17:06
  • is this fine i have updated the protected Route – R9102 Mar 30 '23 at 17:06
  • No, `navigate` is a function, not a React component. – Drew Reese Mar 30 '23 at 17:07
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/252879/discussion-between-r9102-and-drew-reese). – R9102 Mar 30 '23 at 17:09
  • I have update the question here is my protected Route import React from "react"; import { Route, Navigate,Outlet } from "react-router-dom"; const ProtectedRoute = ({ isAuthenticated, component: Component, ...rest }) => { return ( isAuthenticated ? ( ) : ( ) } /> ); }; export default ProtectedRoute; – R9102 Mar 30 '23 at 17:12

0 Answers0