How to redirect another page after button on click method react js [duplicate]

Question

This is the my login.js page code I want redirect the new page after click the button. I tried several methods but problem not solve. All things are work correctly. but I don't know how to link the page after the api return result in loginClick function. I Added this line in the code refer some tutorial but its not work.

this.props.history.push('/add');

I am new to the react js, I don't know about the react well. please help me.

import React,{Component} from 'react';
import { variables } from '../../Variables';



export class Login extends Component{

constructor(props){
    super(props);
    this.state={
        login:[],
        name:"",
        password:"",
        redirect: false
    }
}

changelogindetailsname = (e)=>{
    this.setState({name:e.target.value})
}

changelogindetailspass = (e)=>{
    this.setState({password:e.target.value})
}

loginClick(){

        fetch(variables.API_URL+'login',{
            method:'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            body:JSON.stringify({
                name:this.state.name,
                password:this.state.password
            })
        })
        .then(res=>res.json())
        .then((result)=>{
            alert(result);
            this.props.history.push('/add');
             
        },(error)=>{
            alert('Faild');
        })
    }


render(){
    const{
        name,
        password
    }=this.state;
    return(
            <div>
                <center>
                    <h1></h1>
                    <hr/>
                    <h3>Welcome Back !</h3>
                    <p></p>
                    <div className="container">
                        <br/>
                        <br/>
                        <br/>
                        <div className="row">
                            <div className="col">

                            </div>
                            <div className="col">

                            </div>
                            <div className="col-4">
                            <style>{"\ .rr{\ float:left;\ }\ "} </style>
                            <style>{"\ .bb{\ float:right;\ }\ "} </style>
                                <div className="mb-3">
                                    <label className="form-label rr d-flex"> Username</label>
                                    <div className="input-group input-group-lg">
                                        <input type="text" className="form-control " id="formGroupExampleInput" placeholder="Username"
                                        value={name}
                                        onChange={this.changelogindetailsname}/>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <label className="form-label rr d-flex">Password</label>
                                    <div className="input-group input-group-lg">
                                        <input type="password" className="form-control" id="formGroupExampleInput2" placeholder="Password"
                                        value={password}
                                        onChange={this.changelogindetailspass}/>
                                    </div>
                                </div>
                                <div className="d-flex mb-3">
                                    <a href="#" className="form-label rr"> Forgot your password?</a>
                                </div>
                                <div className="col">
                                        <div className="form-check rr">
                                            <input className="form-check-input" type="checkbox" value="" id="flexCheckDefault"/>
                                            <label className="form-check-label" htmlFor="flexCheckDefault">
                                                Remember me
                                            </label>
                                        </div>
                                </div>
                                   
                                <div className="col">
                                    <button type="button" className="btn btn-success bb"
                                    onClick={()=>this.loginClick() } >Login</button>
                                </div>
                                   
                                <br/>
                                <br></br>
                                <hr/>
                                <p>Don't have an account?</p>
                                <div className="mb-3">
                                    
                                     <button type="button" className="btn btn-light d-flex"
                                     >Sign</button>
                           
                                  </div>
                            </div>
                            <div className="col">
                                
                            </div>
                            <div className="col">
                                
                            </div>
                        </div>

                      
                   
                    </div>
                   
                </center>
            </div>
    )
}

}

mehmed akif ay · Accepted Answer · 2022-04-02 21:22:31Z

3

Firstly you should import this:

import { useHistory } from 'react-router-dom';

then:

const history = useHistory();

after all, you can use this in your method:

loginClick(){

    fetch(variables.API_URL+'login',{
        method:'POST',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json'
        },
        body:JSON.stringify({
            name:this.state.name,
            password:this.state.password
        })
    })
    .then(res=>res.json())
    .then((result)=>{
        alert(result);
        history.push('/add');
         
    },(error)=>{
        alert('Faild');
    })
}

answered Apr 2, 2022 at 21:22

mehmed akif ay

1095 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

axtck Over a year ago

Yes except he is using class components

Bavindu Dissanayake Over a year ago

export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'. get this error msg

Bavindu Dissanayake Over a year ago

Also const history = useHistory(); can't add to the inside of the class I get this error:- The 'const' modifier can only be used in TypeScript files.

Hamid Over a year ago

it's about the new syntax of react-router-dom. you can import Navigate instead of useHistory()

Bavindu Dissanayake Over a year ago

I used Navigate instead of useHistory/() But have the same error

Lukas Laudrain · Accepted Answer · 2022-04-02 21:23:21Z

2

Take a look at the react router API, if you want to use the this.props.history.push() method you will need to wrap your component with the withRouter HOC wrapper from the react dom api.

See : https://reactrouter.com/docs/en/v6/getting-started/tutorial

answered Apr 2, 2022 at 21:23

Lukas Laudrain

4254 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to redirect another page after button on click method react js [duplicate]

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related