Build a Custom 404 Not Found Page With React Router

[00:00 - 00:11] Now, one component or basically one rendered page in a certain route of our app is the not found component. And it's the one component that we haven't provided any UI just yet.

[00:12 - 00:24] So in this moment of time, if I was to actually go to my application and try to access a route that doesn't really exist, I'm going to type a bunch of random characters here. We'll see them not found component, but we haven't set up any UI capability for it.

[00:25 - 00:29] So with that being said, let's quickly just set up some UI. We'll import a few things we'll need.

[00:30 - 00:34] We'll import the React library, which we've done already. We'll also import the fragment component that we're going to use very shortly.

[00:35 - 00:55] And we'll import three components from AMT design that will help us set up the UI for the not found component the way we expect it to. We'll import the empty components, the layout components, and the typography components.

[00:56 - 01:13] The empty component is incredibly straightforward and it's ant design capability to show an empty state placeholder. There's a few examples of different ways you can use it in the documentation, but we'll go with using it with one of the more basic simple ways.

[01:14 - 01:31] We'll further destruct the content components from layout. And we'll further destruct the text component from typography.

[01:32 - 01:52] In the not found component return statement, we'll return the content component with a class we've prepared before labeled not found. And within the content components, we'll render it the empty component from ant design.

[01:53 - 02:05] This empty component takes a description prop that can be used to describe the information being shown in the empty state placeholder. This is where we can actually provide just text or an actual react note.

[02:06 - 02:20] And we'll do this by wrapping what we're going to show here with react fragment components such that we don't have to use an additional development, where we're going to wrap separate elements together. We'll show the text component in our very first text component.

[02:21 - 02:30] We'll say, oh, something went wrong. And we'll provide a class here as well that we provided before.

[02:31 - 02:41] And this would be sort of the title we want to show. So we'll say not found description title.

[02:42 - 02:47] And then we'll show another text element. But in this particular case, we'll show a subtitle of sorts.

[02:48 - 03:16] And then here we'll just say the page you're looking for can't be found. If we were to go back to our client application, and now for the not found component, we see the empty state with the title and subtitle we prepared in not found pages or four or four pages is oftentimes useful to show a link to take the user somewhere in the application.

[03:17 - 03:33] So we can try and import the link components from react router DOM. And outside of our empty states, we can just simply attempt to show a link here .

[03:34 - 03:47] That will essentially just say go to home. We will provide the target route path to be the index routes.

[03:48 - 04:01] And I'll apply a class here as well that I've set up before. If we were to go back to our client application now, we'll see a link that says go to home.

[04:02 - 04:11] If we were to click it, it'll take us back to the index page. And something we've done before in the home page is we try to essentially style the link elements to buttons in certain cases.

[04:12 - 04:36] And the way we've done it to keep things simple is to use and design prepared class names and just throw it into the link component itself. And some of the class names you can apply is and button and button primary to get the primary appearance and and button large to get the large appearance of a button .

[04:37 - 04:44] Now if we were to take a look at our client application, we'll see the primary button that and design provides. But in this context, it's a link.

[04:45 - 04:54] And if I was to click it, it'll take us back to the index page. And as we've mentioned before, the capability to have a link via button can be done in many different ways.

[04:55 - 05:15] The more robust probable way that we would have done it is maybe create a button link component that essentially uses the button component from and design and perhaps uses the history object from React Router to help direct the user to assert a link in the page. But we're keeping things pretty simple here and just adding additional classes to make our link appears a button.

[05:16 - 05:30] And that's pretty much it. We've wanted our not found component to be fairly straightforward and just be a simple UI element to tell the user something went wrong and essentially provide a link to take them to the home page where they're able to navigate to.