Question 72420 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Interrupt React rendering and perform redirection – Reactjs

I am working on a React application (with Next.js) and I would like to accomplish the following:

Some of my pages are not supposed to be reachable before a given context has been set up.
Therefore, I would like to determine if the context has been init, and if not, redirect the user to the page that inits the context.

Note: The context I need to check is located on the client side therefore I cannot use any server side feature of Next.js.

The issue with that is: the router.replace call does not interrupt the rendering process and the page (which cannot be rendered) tries to render and obviously crashes.

Is there a way to completely interrupt the React rendering flow?

NB: I tried to throw a given error, and add an error boundary:

const ErrorBoundaryWithRouter = withRouter(
  class ErrorBoundary extends Component<{ router: Router }, { hasError: boolean }> {
    constructor(props: any) {
      super(props);
      this.state = { hasError: false };
    }

    static getDerivedStateFromError(error: any) {
      return { hasError: true };
    }

    componentDidUpdate(prevProps: { router: Router }, prevState: { hasError: boolean }) {
      if (this.state.hasError) {
        this.props.router.replace('/start');
      }
    }

    render() {
      if (this.state.hasError) {
        return null;
      } else {
        return this.props.children;
      }
    }
  },
);

Although two things happen:

  • I’ve got an infinite loop and router.replace is called X times but never has time to actually replace the current page.
  • It seems that the error is not really caught since I get the Next.JS error popup, although it is supposed to be handled/caught by my error boundary right?

What is the best way to prevent rendering and perform a redirection?

Thanks by advance!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Actually, it did work.

    The redirection infinite loop was likely due to a flaw in my implementation.

    One important thing to note which can help the next guy implementing an error boundary on Next.js:

    The dev mode of Next.js is always aware of errors thrown, even though they are caught by a custom error boundary. I do not know how it works/is possible, but you will always get the Next.js error modal. Once you start in production mode, the error silently pops in the console but nothing rendered and the error boundary actually works like a charm.


  2. 0

    Probably, the thing you are looking for is getServerSideProps or getStaticProps

    I’m not sure what logic you use to check to redirect. But you can try to do something like this in a page module:

     export async function getServerSideProps() {
      const content = null; // get your content here
    
      if (!content) {
        return {
          redirect: {
            permanent: false,
            destination: '/start',
         },
       };
     }
    
     return {
       props: {},
     };
   }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search