时间戳

首页 > 解决方案 > 验证后如何重定向到另一个页面？并且还想将值传递到下一页

reactjs - 验证后如何重定向到另一个页面？并且还想将值传递到下一页

问题描述

这是一个验证并返回一些数据的函数 ValidateUser

ValidateUser=(e)=>{
e.preventDefault();
axios.post('http://localhost/backend-mall-management/Login/Validate.php',this.state)
.then(res => {
if(res.data){
var Username=res.data.Username;
var User_Id=res.data.User_Id;
var Name=res.data.Name;
var Email=res.data.Email;
if(Username=='admin' || Username=='admin1' || Username=='admin2'){

      *From here I want the next page to render say AdminPage.*
}
else{

      *Also here I want the next page to render say ManagrePage.*
}
}else{
alert("Invaild Username or Password!!");
      this.setState({
            Username:'',
            Password:''
   });

渲染有形式。

<input type="submit" name="sign-in" value="Sign In" onClick={this.ValidateUser}/>

这将调用 ValidateUser。所有组件都通过 App.js 呈现。它有这个用于路由。

<BrowserRouter >
    <div className='App'>
      <Switch>
      <Route exact path='/' component={HomePage}/>
      <Route exact path='/AdminPage' component={AdminPage}/>
      </Switch>

    </div>
  </BrowserRouter>

标签： reactjs

解决方案

您需要使用历史记录以编程方式在您的应用程序内导航：

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

let history = useHistory();

...
if(Username=='admin' || Username=='admin1' || Username=='admin2'){
   history.push('/AdminPage');
} else {
   history.push('/'); // redirect to home page
}

推荐阅读