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

Question

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

I used the Route and Browser Router to create the link to the page.
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;

`` is not a command you call, it's a component you render. You already have the `value` state, so all you need to do is add `{this.state.value && }` after your ``. (you should also rename that variable from `value` to something like `validUser`) — , Oct 22 '20 at 07:06
Does this answer your question? [How to use Redirect in the new react-router-dom of Reactjs](https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs) — , Oct 22 '20 at 07:09

Rohitha · Accepted Answer · 2020-10-22T08:21:27.220

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>             
              
        )
    }

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

1 Answers1