I want to redirect to a new page on react on a conditon

Tags: ,



Error:Line 33:13: Expected an assignment or function call and instead saw an expression no-unused-expressions

  1. I used the Route and Browser Router to create the link to the page.
  2. I need to redirect to the home page on signing in.

import axios from 'axios'
import {Redirect} from 'react-router-dom'
import React,{Component} from 'react'
const url ="http://localhost:80/phpfile"
class Signup extends Component{
    constructor(){
        super();
        this.state={
            username:"",
            password:"",
            value:false
        }
    }
    sign=e=>{
        e.preventDefault();
        const user={
            "username":this.state.username,
            "password":this.state.password
        }
        axios.post(url,user,{"header":{ "content-type": "application/json",}}
            )
        .then(result=>{if (result.data===true)
            {
            this.setState({value:true});
            }
        })
        if(this.state.value){
            <Redirect to='/'/>
        }
    }
    render(){
        const value= this.state.value;
        return(
            <div>
                <form action="#">
                    <label> Username</label>
                    <input name="name" value="Enter the usrname" id ="name"
                    onChange={e => this.setState({ username: e.target.value })}/>
                    <label>Password</label>
                    <input type="password" placeholder="Enter Password" id="pass" 
                    name="pass" onChange={e => this.setState({password: e.target.value })}/>
                    <botton onClick={e=>this.sign(e)}>Signin</botton>
                </form>
               </div>
        )
    }
}
export default Signup;

Answer

As you are not using state anywhere, you can add redirect instead of setting state:

  ...
      .then(result=>{if (result.data===true)
                {
                 return <Redirect to='/'/>
                }
            })

or if state requirement is there, then based on state you can add the Redirect in return statement of component

render(){
        const value= this.state.value;

        return(
          <div>
            {!value ?
                (<form action="#">
                    <label> Username</label>
                    <input name="name" value="Enter the usrname" id ="name"
                    onChange={e => this.setState({ username: e.target.value })}/>
                    <label>Password</label>
                    <input type="password" placeholder="Enter Password" id="pass" 
                    name="pass" onChange={e => this.setState({password: e.target.value })}/>
                    <botton onClick={e=>this.sign(e)}>Signin</botton>
                </form>)
                : (<Redirect to='/'/>)
              }
            </div>             
              
        )
    }


Source: stackoverflow