如何在单击方法 react js 上的按钮后重定向另一个页面

Question

这是我的 login.js 页面代码，我希望在单击按钮后重定向新页面。我尝试了几种方法但问题没有解决。一切正常。但我不知道如何 link api return 后的页面导致 loginClick 函数。我在代码中添加了这一行，参考了一些教程，但它不起作用。

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

我是react js新手，对react不太了解。请帮助我。

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 up for Muessoze</button>
                           
                                  </div>
                            </div>
                            <div className="col">
                                
                            </div>
                            <div className="col">
                                
                            </div>
                        </div>

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

}

Answer 1

首先你应该导入这个：

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

然后：

const history = useHistory();

毕竟，您可以在您的方法中使用它：

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

Answer 2

看看 React 路由器 API，如果你想使用 this.props.history.push() 方法，你需要用来自 React withRouter HOC 包装器包装你的组件 dom api.

参见：https://reactrouter.com/docs/en/v6/getting-started/tutorial

如何在单击方法 react js 上的按钮后重定向另一个页面

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

javascript

reactjs

.net-core

react-router-dom

reactjs.net