can we redirect to another page declaretively?

[videni]

I need to redrect to login page if a 401 error is catched. I did this with React error boundary. the Router.push is not supposed to be used imperatively.

class ErrorBoundary extends React.Component<any> {
  state = {error: null};

  componentDidCatch(error) {
    this.setState({error});
  }

  render() {
    const {children, fallback, router} = this.props;
    const { asPath } = router;

    const {error} = this.state;
    if (error instanceof RRNLRequestError && error.res.status == 401) {
      Router.push(`/login?redirect=${asPath}`); 
      return;  // <Redirect to={`/login?redirect=${asPath}`} />
    }

    if (error) {
      return React.createElement(fallback, {error});
    }
    return children;
  }
}

[Timer]

This seems mostly correct—Router.push is intended for imperative use but should happen as part of the component lifecycle instead of rendering.

class ErrorBoundary extends React.Component<any> {
  state = { error: null };

  componentDidCatch(error) {
    this.setState({ error });
  }

  componentDidMount() {
    maybeRedirectToLogin();
  }
  componentDidUpdate() {
    maybeRedirectToLogin();
  }

  maybeRedirectToLogin() {
    const { router } = this.props;
    const { asPath } = router;
    const { error } = this.state;
    if (error && error instanceof RRNLRequestError && error.res.status == 401) {
      Router.push(`/login?redirect=${asPath}`);
    }
  }

  render() {
    const { children, fallback } = this.props;
    const { error } = this.state;

    if (error) {
      return React.createElement(fallback, { error });
    }
    return children;
  }
}

[videni]

somehow, your code will do redirection forever.

http://localhost:4000/login?redirect=/login?redirect=/login?redirect=/login?