Reactjs 反应重定向导致错误：超出最大更新深度_Reactjs_Ionic Framework_Redirect

Reactjs 反应重定向导致错误：超出最大更新深度

reactjs ionic-framework redirect

Reactjs 反应重定向导致错误：超出最大更新深度,reactjs,ionic-framework,redirect,Reactjs,Ionic Framework,Redirect,在React应用程序中，我有一个登录页面。当用户成功通过身份验证时，应用程序应重定向到另一个页面。但在登录页面和其他页面之间出现乒乓球，导致浏览器错误消息： “超出了最大更新深度。” 我使用的是离子4，但我认为这对所描述的行为没有影响 Login page: import React, { Component } from 'react' import { IonContent, IonGrid, IonRow, IonCol, IonItem, IonLabel, IonButton, Ion

在React应用程序中，我有一个登录页面。当用户成功通过身份验证时，应用程序应重定向到另一个页面。但在登录页面和其他页面之间出现乒乓球，导致浏览器错误消息： “超出了最大更新深度。”

我使用的是离子4，但我认为这对所描述的行为没有影响

Login page:
import React, { Component } from 'react'
import { IonContent, IonGrid, IonRow, IonCol, IonItem, IonLabel, IonButton, IonInput} from '@ionic/react'
import { Redirect } from 'react-router'
import './LoginPage.css'

class LoginPage extends Component {
  state = {
  uid: localStorage.getItem('userid'),
  pw: '',
  token: '',
  msg: '',
  isAuthenticated: false
  }

  handleSubmit (e: any) {
e.preventDefault();

if (this.state.uid !== '' && this.state.pw === ' ') {   
  this.setState({isAuthenticated: true});
}
else {
  this.setState({token: ''});
  this.setState({pw: ''});
  this.setState({msg: 'Login error.'});
}
  };

  handleChange(e: any) {
e.preventDefault();
this.setState({[e.target.name]: e.target.value });  
  }


  render() {    
const isAuth = this.state.isAuthenticated;

if (isAuth === true) {
  return (
    <Redirect to="/anotherpage"/>
  )
} else {
    return (
<IonContent>
      <form onSubmit={(e) => this.handleSubmit(e)} action="/selectmodel">
        <IonGrid fixed>
          <IonRow justify-content-center>
            <IonCol align-self-center padding>
              <div className="header">
                <h1>Compoot</h1>
                <span>Version 0.1</span>
              </div><br /><br />
              <IonItem>
                <IonLabel position="floating">User Name</IonLabel>
                <IonInput name="uid" value={this.state.uid} type="text" required={true} clearInput={true} onIonBlur={(e) => this.handleChange(e)} ></IonInput>
              </IonItem><br />

              <IonItem>
                  <IonLabel position="floating">Password</IonLabel>
                  <IonInput name="pw" value={this.state.pw}  type="password" required={true} clearInput={true} onIonBlur={(e) => this.handleChange(e)}></IonInput>
              </IonItem><br />
              <div className="msg">
                {this.state.msg ? (this.state.msg): null}
              </div><br />
              <div className="login">
                <IonButton size="large" type="submit" >Login</IonButton>
              </div>
              <br /><br />
              <div className="link">
                <IonLabel onClick={this.showResetPW}>
                  Forgot password
                </IonLabel>
              </div>

            </IonCol>
          </IonRow>
        </IonGrid>
      </form>
    </IonContent>


);
}
  }
}

export default LoginPage;

登录页面：
从“React”导入React，{Component}
从'@ionic/react'导入{IonContent、IonGrid、IonRow、IonCol、IonItem、IonLabel、IonButton、IonPut}
从“react router”导入{Redirect}
导入“./LoginPage.css”
类LoginPage扩展组件{
状态={
uid:localStorage.getItem（'userid'），
嗯：''，
令牌：“”，
消息：“”，
I验证：错误
}
handleSubmit（e:任何）{
e、 预防默认值（）；
如果（this.state.uid！=''&&this.state.pw==''）{
this.setState（{isAuthenticated:true}）；
}
否则{
this.setState（{token:'}）；
this.setState（{pw:'}）；
this.setState（{msg:'Login error.'}）；
}
};
handleChange（e:任何）{
e、 预防默认值（）；
this.setState（{[e.target.name]：e.target.value}）；
}
render（）{
const isAuth=this.state.isAuthenticated；
如果（isAuth==真）{
返回(
)
}否则{
返回(
this.handleSubmit（e）}action=“/selectmodel”>
康波特
版本0.1



用户名
此.handleChange（e）}>


密码
此.handleChange（e）}>


{this.state.msg？（this.state.msg）：null}


登录



忘记密码
);
}
}
}
导出默认登录页面；

另一页：

import React, { Component } from 'react';
import { IonContent} from '@ionic/react'


class SelectModelPage extends Component {


  render() {
console.log('selectmodel');
return (
  <IonContent>
    <div>This is SelectModel!</div>
  </IonContent>
);
  }
    }

export default SelectModelPage;

import React，{Component}来自'React'；
从'@IONAL/react'导入{IonContent}
类SelectModelPage扩展组件{
render（）{
log（'selectmodel'）；
返回(
这是我的模特！
);
}
}
导出默认选择模型页面；

App.tsx：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route,  } from 'react-router-dom';

import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';

import './App.css';

import LoginPage from './LoginPage';
import SelectModelPage from './SelectModelPage';


class App extends Component {
  render() {
    return (
  <Router>
    <div className="App">
      <IonApp>
        <IonPage id="main">
          <IonRouterOutlet>
            <Route exact path="/selectmodel" component={SelectModelPage} />
            <Route exact path="/"  component={LoginPage} />
          </IonRouterOutlet>
        </IonPage>
      </IonApp>
    </div>
  </Router>
);
  }
    }

    export default App;

import React，{Component}来自'React'；
从'react Router dom'导入{BrowserRouter as Router，Route，}；
从'@IONAL/react'导入{IonApp，IonPage，IonRouterOutlet}；
导入“/App.css”；
从“/LoginPage”导入登录页面；
从“/SelectModelPage”导入SelectModelPage；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

有什么想法吗？

您在路线定义中缺少了一个

开关

：

<Router>
    <div className="App">
      <IonApp>
        <IonPage id="main">
          <IonRouterOutlet>
            <Switch>
              <Route exact path="/selectmodel" component={SelectModelPage} />
              <Route exact path="/"  component={LoginPage} />
            </Switch>
          </IonRouterOutlet>
        </IonPage>
      </IonApp>
    </div>
  </Router>

更多信息：

谢谢您的提示。但我收到以下错误消息：TypeError:cannotreadproperty'length'of undefined parse C:/react/compoot/node_modules/react router/node_modules/path to regexp/index.js:86 83}//匹配任何剩余字符。84 | 85 |>86 | if（index

[ionic framework]相关文章推荐

随机文章推荐