Check out a free preview of the full Complete Intro to React, v6 course:
The "Redirect on Error" Lesson is part of the full, Complete Intro to React, v6 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through how to redirect a user back to the homepage when an error occurs by using Redirect from react-router-dom. Placing Redirect in componentDidCatch will help avoid not redirecting on immediate page load errors.

Get Unlimited Access Now

Transcript from the "Redirect on Error" Lesson

[00:00:00]
>> So let's make this even a little bit more robust, just to show you how to do redirects in react router. So let's head back to, our error boundary. Let's say we want to redirect the user. So click here to go back to the home page. Or wait five seconds.

[00:00:28] That's good behavior, right? We're going to show them an error message. And then after five seconds, we're just going to redirect them back to the homepage. How would you do that? Well, up here from react router DOM, there's another component called redirect that anytime you render, it's just going to redirect somewhere.

[00:00:46] So here I'm gonna say has error and I'm also gonna get a hidden state rather, redirect, redirect, false. And then we're gonna make another life cycle method here component did update. This gets called anytime that the component updates itself, right. So if this.state.hasError, so if it has an error then set a timeout.

[00:01:25] For this.setState redirect, true. And we'll do that after five seconds. So 5,000 cuz it counts in milliseconds, right? Okay? Next thing here. If, this.state.redirect return. Redirect, to /. Else do these other things. Just to walk through it, user hits and error. We call are get derived state from props.

[00:02:27] So return hasError true, right? That's going to update it. So that's going to kick us into component did catch. That's going to call our Azure monitor or track j s or whatever. Then because has error updated, it's going to call this component did update. And then that's gonna kick off a timer for five seconds that if the user, you know, doesn't do anything, it's going to redirect them back to the homepage.

[00:02:54] So let's see that in action. Go to details and we're going to throw a new error throw new error. Okay. We should be able to just wait and then it should take us back to the homepage. So it's not doing it. Let's figure out why. It's not com calling component did update.

[00:03:26] Well another way of doing this for sure that's gonna work is we could absolutely put this inside of component did catch. And that did end up working as well. You know why this isn't working? I actually know exactly why this is not working. componentDidupdate cannot be called on the very first time that it renders which you would assume that you wouldn't hit an error on the first time.

[00:03:55] But that's not always true. So this actually is a bad fit for this particular place. So there you go. Learn something with Brian as he was learning, stumbling around here. componentDidupdate will never be called on the first time. So this is actually a better place to do it if you immediately have an error, which you shouldn't because that's basically a syntax error and or just throwing an error here.

[00:04:19] So but to be a bit more defensive, you can put it in component did catch here and that'll handle that. All right. So don't throw in your renders. Pro tip just in general. Don't throw new errors and hot code paths. Okay, put that back to 5000. The key takeaway here is redirect, right?

[00:04:46] This is actually how you do redirects with react router. You just render a redirect component and we'll send you on your way.