With the addition of guard middleware, the navigation lifecycle has changed. It will now be as follows:
-
Start on Page A.
-
Navigation initiated. The loading page is shown.
-
Check if there are guards left in the queue.
-
If there are guards, continue to step 4.
-
If no guards remain, skip to step 5.
-
-
Run the top guard in the queue:
-
next(): Return to step 3. -
next.props(): Add the props to the render of Page B, and return to step 3. -
next.redirect(): Redirect to given location, and restart at step 1. -
Error: Navigation has been prevented. The error page is shown.
-
-
Navigation was successful! Page B is shown.