Navigating (Routing) from one page to another in different folders in jsx Reactjs

user_12886858 0
Viewed 46

I'm trying to when a user enters a correct email and password it redirects him to the main page (blog.jsx) which is located in mainPage folder.

When I run my code it doesn't display any errors in the console but it doesn't redirect it when you enter the correct email and password (the if-else statement works because when users enters wrong email and password the popup screen shows up)

Here is my code:

  const login =() =>{
    Axios.post('http://localhost:3001/login',{
      email:email,
      password:password
    }).then((response)=>{
      if(response.data.message){
        alert(response.data.message)
      }
      else{
        return <Redirect to="../mainPage/blog" />
      }
    })
  }

Full code:

import React, { useContext } from "react";
import {useState} from "react";
import {useHistory} from "react-router-dom";
import Axios from 'axios';
import {
  BoldLink,
  BoxContainer,
  FormContainer,
  Input,
  MutedLink,
  SubmitButton,
} from "./common";
import { Marginer } from "../marginer";
import { AccountContext } from "./accountContext";

export function LoginForm(props) {
  let history = useHistory();
  const { switchToSignup } = useContext(AccountContext);
  const [email, setEmail]=useState('');
  const [password, setPassword]=useState('');
  
  
  const login =() =>{
    Axios.post('http://localhost:3001/login',{
      email:email,
      password:password
    }).then((response)=>{
      if(response.data.message){
        alert(response.data.message)
      }
      else{
        history.push("../mainPage/blog");
      }
    })
  }

  const myFunction =()=>{
    alert("TODO");
  }
  
  return (
    <BoxContainer>
      <FormContainer>
        <Input type="email" placeholder="Email" onChange={(e)=>{setEmail(e.target.value)}}/>
        <Input type="password" placeholder="Password" onChange={(e)=>{setPassword(e.target.value)}}/>
      </FormContainer>
      <Marginer direction="vertical" margin="1em" />
      <MutedLink href="#" onClick={myFunction}>Forget your password?</MutedLink>
      <Marginer direction="vertical" margin="1em" />
      <SubmitButton type="submit" onClick={login} >Login</SubmitButton>
      <Marginer direction="vertical" margin="1em" />
      <MutedLink href="#" onClick={switchToSignup}>
        Don't have an accoun?{" "}
        <BoldLink href="#" onClick={switchToSignup}>
          Register
        </BoldLink>
      </MutedLink>
    </BoxContainer>
  );
}

I tried using Redirect and Link but it didn't work for either. Any hint/tip would be great. Thanks in advance :D

jsx reactjs redirect
1 Answers

Returning a React element (<Redirect.../>) from a callback won't do anything. Instead, you could use the React Router history object, like so:

  const history = useHistory();
  const login = () =>{
    Axios.post('http://localhost:3001/login',{
      email:email,
      password:password
    }).then((response)=>{
      if(response.data.message){
        alert(response.data.message)
      }
      else{
        history.push("../mainPage/blog")
      }
    })
  }
user_77976610
Related