Question

我正在尝试为我的Web应用程序设置登录注册路由。

想法是：

登录并注册
如果没有身份验证，它将直接指向/login，然后将呈现Login组件。如果有，我将定向到/dashboard
在Login中，如果用户键入正确的用户名和密码，它将重定向到/dashboard，否则它对路由没有任何作用。
如果用户访问/，如果进行了任何身份验证，则用户将重定向到/dashboard，否则将重定向到/login

我尝试使用this.props.history.push在Login-DashBoard组件之间重定向。

到目前为止，这是我的路线，我不知道这是否是最佳实践。如果不是这样，将不胜感激。

Routing.js：

...
   render() {
      return(
         <>
          <Route path="/login"><Login showAlert={this.showAlert}/></Route>
          <Route path="/register"><Register showAlert={this.showAlert}/></Route>

          <AuthRoute authed={AuthenticationService.isUserLoggedIn()} path="/">
             <Dashboard/>
          </AuthRoute>

          <AuthRoute authed={AuthenticationService.isUserLoggedIn()} path="/dashboard">
               <Dashboard/>
          </AuthRoute>
        </>
      )
...

Login.js：

...
    componentDidMount() {
        if(AuthenticationService.isUserLoggedIn()) {
            this.props.history.push('/dashboard');
        }
    }
...
    handleSubmit = (event) => {
        event.preventDefault();
        AuthenticationService.authenticateAccount(this.state.email, this.state.password)
            .then(() => {
                this.props.history.push('/dashboard')
            });
    }
...
export default withRouter(Login);

但是，尽管我使用了Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.，但它有componentDidMount()

再次，我们将不胜感激。

谢谢。

更新：仅从login

单击/login后才会发生问题

Answer 1

通过将路由器位置与我尝试进行的推送进行比较，我能够摆脱此循环，如下所示：

import { withRouter, useHistory, useLocation } from 'react-router-dom';

//...

const App = () =>  {

    //...

    const history = useHistory();

    const location = useLocation();

    const changePage = (change: { page: string, params: string, refresh: boolean}) => {

        if (location.pathname !== change.page || location.search !== change.param) {
     
            history.push({
                pathname: change.page,
                search: change.param
            });

        };

        if (change.refresh) {
            history.go(0);
        };

    };

    //...

};

export default withRouter(App);

this.props.history.push超过了最大更新深度

1 个答案: