title: When i click on login button then i want to go homepage with the help of react-router but it is not working in my code if anyone can help me in this
body: <p><strong>App.js</strong>
  this is App.js file where I'm connecting one to another</p>
  <pre><code>import LoginForm from &quot;./components/login/LoginForm&quot;;
  import Homepage from &quot;./components/pages/HomePage&quot;;
  import { Route, Switch, Redirect } from &quot;react-router-dom&quot;;
  import { useContext } from &quot;react&quot;;
  import HooteContext from &quot;./store/hoote-context&quot;;
  import Layout from &quot;./components/Layout/Layout&quot;;
  
   function App() {
      const hooteCtx = useContext(HooteContext);
  
      const isLoggedIn = hooteCtx.isLoggedIn;
  
     return (
       &lt;&gt;
    &lt;Layout&gt;
      &lt;Switch&gt;
        &lt;Route path=&quot;/&quot; exact&gt;
           &lt;LoginForm /&gt;
        &lt;/Route&gt;
        {console.log(isLoggedIn)}
        &lt;Route path=&quot;/home&quot;&gt;{isLoggedIn &amp;&amp; &lt;Homepage /&gt;}
        {/* {!isLoggedIn &amp;&amp; &lt;Redirect to='/'&gt;&lt;/Redirect&gt;} */}
        &lt;/Route&gt;
        {/* &lt;Route path=&quot;/login&quot;&gt;{!isLoggedIn &amp;&amp; &lt;LoginForm /&gt;}&lt;/Route&gt; */}
        &lt;Route path=&quot;*&quot;&gt;
          &lt;Redirect to=&quot;/&quot;&gt;&lt;/Redirect&gt;
        &lt;/Route&gt;
      &lt;/Switch&gt;
    &lt;/Layout&gt;
  &lt;/&gt;
   );
   }
  
   export default App;
  </code></pre>
  <p><strong>StartingPage.js</strong>
  this is my startingpage component (homepage). I want go on this page when I click on login button</p>
  <pre><code>import &quot;./StartingPage.css&quot;;
   import AppBar from &quot;@mui/material/AppBar&quot;;
   import Box from &quot;@mui/material/Box&quot;;
   import Toolbar from &quot;@mui/material/Toolbar&quot;;
   import Typography from &quot;@mui/material/Typography&quot;;
   import Button from &quot;@mui/material/Button&quot;;
   import IconButton from &quot;@mui/material/IconButton&quot;;
   import MenuIcon from &quot;@mui/icons-material/Menu&quot;;
   import HooteContext from &quot;../../store/hoote-context&quot;;
   import { useContext } from &quot;react&quot;;
   import { Link } from &quot;react-router-dom&quot;;
  
   const StartingPage = () =&gt; {
   const hooteCtx = useContext(HooteContext);
  
   const isLoggedIn = hooteCtx.isLoggedIn;
  
   //   const logoutHandler = () =&gt; {
  //     hooteCtx.logout;
  //   };
  
     return (
      &lt;&gt; &lt;Link to=&quot;/home&quot;&gt;
       &lt;Box sx={{ flexGrow: 1 }}&gt;
        {isLoggedIn &amp;&amp; &lt;AppBar position=&quot;static&quot;&gt;
        &lt;Toolbar&gt;
          &lt;IconButton
            size=&quot;large&quot;
            edge=&quot;start&quot;
            color=&quot;inherit&quot;
            aria-label=&quot;menu&quot;
            sx={{ mr: 2 }}
          &gt;
           
              &lt;MenuIcon /&gt;
            
          &lt;/IconButton&gt;
          &lt;Typography variant=&quot;h6&quot; component=&quot;div&quot; sx={{ flexGrow: 1 }}&gt;
            News
          &lt;/Typography&gt;
  
          &lt;Button color=&quot;inherit&quot; &gt;
            Logout
          &lt;/Button&gt;
        &lt;/Toolbar&gt;
      &lt;/AppBar&gt;}
       &lt;/Box&gt;
      &lt;/Link&gt;
     {isLoggedIn &amp;&amp; &lt;div className=&quot;main&quot;&gt;
      &lt;img className=&quot;img_logo&quot; src=&quot;./image.png&quot; alt=&quot;img&quot; /&gt;
      &lt;h1 className=&quot;content&quot;&gt;Content Management System&lt;/h1&gt;
     &lt;/div&gt;}
    &lt;/&gt;
     );
     };
   export default StartingPage;
  </code></pre>
  <p><strong>HomePage</strong></p>
  <pre><code>    import StartingPage from &quot;../StartingPage/StartingPage&quot;;
  
       const Homepage = () =&gt; {
      return &lt;div&gt;
      &lt;StartingPage/&gt;
      &lt;/div&gt;;
      };
       export default Homepage;
  </code></pre>
  <p><strong>LoginForm.js</strong>
  This is my loginform component where I fetch login Api and signup Api from firebase and I also use material ui for styling</p>
  <pre><code>    import React, { useState, useRef, useContext } from &quot;react&quot;;
       // import * as React from 'react';
       import Avatar from &quot;@mui/material/Avatar&quot;;
         import Button from &quot;@mui/material/Button&quot;;
        // import CssBaseline from '@mui/material/CssBaseline';
        import TextField from &quot;@mui/material/TextField&quot;;
        import FormControlLabel from &quot;@mui/material/FormControlLabel&quot;;
        import Checkbox from &quot;@mui/material/Checkbox&quot;;
        import Link from &quot;@mui/material/Link&quot;;
         import Grid from &quot;@mui/material/Grid&quot;;
        import Box from &quot;@mui/material/Box&quot;;
         import LockOutlinedIcon from &quot;@mui/icons-material/LockOutlined&quot;;
        import Typography from &quot;@mui/material/Typography&quot;;
         import { useHistory } from &quot;react-router&quot;;
         import HooteContext from &quot;../../store/hoote-context&quot;;
         // import Container from '@mui/material/Container';
        // import { createTheme, ThemeProvider } from '@mui/material/styles';
  
          function Copyright(props) {
                  return (
                 &lt;Typography
                 variant=&quot;body2&quot;
               color=&quot;text.secondary&quot;
              align=&quot;center&quot;
                {...props}
                     &gt;
                {&quot;Copyright © &quot;}
                 &lt;Link color=&quot;inherit&quot; href=&quot;https://d3gguh60q65ov3.cloudfront.net/#/&quot;&gt;
                Your Website
                &lt;/Link&gt;{&quot; &quot;}
                {new Date().getFullYear()}
                    {&quot;.&quot;}
                  &lt;/Typography&gt;
                      );
                     }
  
            //   const theme = createTheme();
  
           const LoginForm = () =&gt; {
  
            const hooteCtx=useContext(HooteContext)
  
           const history=useHistory()
  
           const emailInputRef = useRef();
              const passwordInputRef = useRef();
  
          const [isLogin, setIsLogin] = useState(true);
            const [isLoading, setIsLoading] = useState(false);
  
           const switchAuthModeHandler = () =&gt; {
             setIsLogin((prevState) =&gt; !prevState);
                };
  
            const handleSubmit = (event) =&gt; {
             event.preventDefault();
           // const data = new FormData(event.currentTarget);
  
              const enteredEmail = emailInputRef.current.value;
              const enteredPassword = passwordInputRef.current.value;
  
              // const formData = {
            //   email: enteredEmail,
            //   password: enteredPassword,
                   // };
             // console.log({
              //   email: data.get('email'),
             //   password: data.get('password'),
                // });
               // console.log(formData);
             setIsLoading(true);
              let url;
              if (isLogin) {
              url =
         &quot;https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword? 
             key=AIzaSyA7UUC0bXrduiMDaD5Gx-P7JJppWn3yy2g&quot;;
       } else {
      url =
        &quot;https://identitytoolkit.googleapis.com/v1/accounts:signUp? 
         key=AIzaSyA7UUC0bXrduiMDaD5Gx-P7JJppWn3yy2g&quot;;
    }
    fetch(url, {
      method: &quot;POST&quot;,
      body: JSON.stringify({
        email: enteredEmail,
        password: enteredPassword,
        returnSecureToken: true,
      }),
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
      },
    })
      .then((res) =&gt; {
        setIsLoading(false);
        if (res.ok) {
          return res.json();
        } else {
          return res.json().then((data) =&gt; {
              console.log(data)
            let errorMessage = &quot;Authentication Failed&quot;;
  
            throw new Error(errorMessage);
          });
        }
      })
      .then((data) =&gt; {
        hooteCtx.login(data.idToken )
        history.replace('/home')
      })
      .catch((err) =&gt; {
        alert(err.message);
      });
        };
         return (
            &lt;&gt;
        {/* &lt;ThemeProvider theme={theme}&gt;
       &lt;Container component=&quot;main&quot; maxWidth=&quot;xs&quot;&gt;
      &lt;CssBaseline /&gt; */}
           &lt;Grid container justifyContent=&quot;center&quot; alignItems=&quot;center&quot;&gt;
        &lt;Box
        sx={{
          marginTop: 8,
          display: &quot;flex&quot;,
          flexDirection: &quot;column&quot;,
          alignItems: &quot;center&quot;,
          width: 400,
        }}
         &gt;
        &lt;Avatar sx={{ m: 1, bgcolor: &quot;secondary.main&quot; }}&gt;
          &lt;LockOutlinedIcon /&gt;
        &lt;/Avatar&gt;
        
        {isLogin ? (
          &lt;Typography component=&quot;h1&quot; variant=&quot;h5&quot;&gt;
            Sign In
          &lt;/Typography&gt;
        ) : (
          &lt;Typography component=&quot;h1&quot; variant=&quot;h5&quot;&gt;
            Sign Up
          &lt;/Typography&gt;
        )}
  
        &lt;Box
          component=&quot;form&quot;
          onSubmit={handleSubmit}
          noValidate
          sx={{ mt: 1 }}
        &gt;
          &lt;TextField
            margin=&quot;normal&quot;
            required
            fullWidth
            id=&quot;email&quot;
            label=&quot;Email Address&quot;
            name=&quot;email&quot;
            //   autoComplete=&quot;email&quot;
            autoFocus
            inputRef={emailInputRef}
          /&gt;
          &lt;TextField
            margin=&quot;normal&quot;
            required
            fullWidth
            name=&quot;password&quot;
            minLength=&quot;6&quot;
            label=&quot;Password&quot;
            type=&quot;password&quot;
            id=&quot;password&quot;
            //   autoComplete=&quot;current-password&quot;
            inputRef={passwordInputRef}
          /&gt;
          &lt;FormControlLabel
            control={&lt;Checkbox value=&quot;remember&quot; color=&quot;primary&quot; /&gt;}
            label=&quot;Remember me&quot;
          /&gt;
          {isLogin ? (
            &lt;Button
              type=&quot;submit&quot;
              fullWidth
              variant=&quot;contained&quot;
              sx={{ mt: 3, mb: 2 }}
            &gt;
              Login 
            &lt;/Button&gt;
          ) : (
            &lt;Button
              type=&quot;submit&quot;
              fullWidth
              variant=&quot;contained&quot;
              sx={{ mt: 3, mb: 2 }}
            &gt;
              Create Account
            &lt;/Button&gt;
          )}
          &lt;Grid container&gt;
            &lt;Grid item xs&gt;
              &lt;Link href=&quot;#&quot; variant=&quot;body2&quot;&gt;
                Forgot password?
              &lt;/Link&gt;
            &lt;/Grid&gt;
            &lt;Grid item&gt;
              {isLoading &amp;&amp; &lt;p&gt;Sending request...&lt;/p&gt;}
              {isLogin ? (
                &lt;Link
                  href=&quot;#&quot;
                  variant=&quot;body2&quot;
                  onClick={switchAuthModeHandler}
                &gt;
                  Don't have an account? Sign Up
                &lt;/Link&gt;
              ) : (
                &lt;Link
                  href=&quot;#&quot;
                  variant=&quot;body2&quot;
                  onClick={switchAuthModeHandler}
                &gt;
                  Login with existing account
                &lt;/Link&gt;
              )}
            &lt;/Grid&gt;
          &lt;/Grid&gt;
                &lt;/Box&gt;
               &lt;/Box&gt;
                 &lt;/Grid&gt;
               &lt;Copyright sx={{ mt: 8, mb: 4 }} /&gt;
              {/* &lt;/Container&gt;
            &lt;/ ThemeProvider&gt; */}
                 &lt;/&gt;
             );
              };
              export default LoginForm;
  </code></pre>
  <p><strong>Layout.js</strong></p>
  <pre><code>         import StartingPage from &quot;../StartingPage/StartingPage&quot;;
  
        const Layout =(props)=&gt;{
        return (
      &lt;&gt;
        &lt;StartingPage/&gt;
        &lt;main&gt;{props.children}&lt;/main&gt;
      &lt;/&gt;
    );
        }
       export default Layout
  </code></pre>
  <p><strong>hoote-context.js</strong></p>
  <pre><code>    import React, { useState } from &quot;react&quot;;
  
       const HooteContext = React.createContext({
            token: &quot;&quot;,
           isLoggedIn: false,
          login: (token) =&gt; {},
           logout: () =&gt; {},
                });
  
            export const HooteContextProvider = (props) =&gt; {
          //   let initialToken;
          // if (tokenData) {
           //   initialToken = tokenData.token;
             // }
  
          const [token, setToken] = useState(null);
  
           const userIsLoggedIn = !!token;
  
           const loginHandler = () =&gt; {
             setToken(token);
                };
  
         const logoutHandler = () =&gt; {
            setToken(null);
             };
  
          const contextValue = {
              token: token,
            isLoggedIn: userIsLoggedIn,
            login: loginHandler,
           logout: logoutHandler,
           };
          return (
             &lt;HooteContext.Provider value={contextValue}&gt;
              {props.children}
               &lt;/HooteContext.Provider&gt;
                  );
              };
  
            export default HooteContext;
  </code></pre>