- Page 404 is also known as the page not found and it usually pops up when the user enters the wrong link or the link is not available. In this case to create the cohesive UI, we need to show them a 404 page instead of a blank page and let them know that the page they’re looking for is not.
- How do I create a custom 404 in React?
- To understand how to create it, we first need to make sure that we understand how Routing works in React. The React Router is what we’ll use to create the SPA
- In React and React Router, we are in SPA (Single Page Apps), so of course there will be no “404” page – but instead a component. The component will need to show up if a router is not recognized.
- Thankfully, this is very simple and easy in React Router!
- Inside the <Switch /> component from the React Router, we can declare a <Route /> at the end of the route declaration.
- This means that if the above routers are not suitable, the only possible solution is to create a router that doesn’t really exist.
- To help us change dynamic data, we use React Router. This feature conditionally displays certain elements to display depending on the routet being used in the URL (/, / login, / register, etc.).
- To use the router, you have to install it first using npm: npm install react-router-dom
- The usage is that we import the components we need to use into our code:
1 2 3 | import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; |
- How can we create a 404 component? In your component mail, create a new file called NotFound.js and add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import React from 'react'; import { Link } from 'react-router-dom'; const NotFound = () => ( <div className="not-found"> <img src="https://www.pngitem.com/pimgs/m/561-5616833_image-not-found-png-not-found-404-png.png" alt="not-found" /> <Link to="/" className="link-home"> Go Home </Link> </div> ); export default NotFound; |
- After creating a not found component, make sure you import the file into our routers configuration.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import React from 'react'; import { Router } from 'react-router'; import { Switch, Route } from 'react-router-dom'; import RootContainer from 'containers/Root'; import PostListContainer from 'containers/PostList'; import LoginContainer from 'containers/Login'; import RegisterContainer from 'containers/Register'; import NotFound from 'containers/NotFound'; const App = () => { return ( <Router> <Switch> <Route path="/posts" component={PostListContainer} /> <Route path="/register" component={RegisterContainer} /> <Route path="/login" component={LoginContainer} /> <Route exact path="/" component={RootContainer} /> <Route path="*" component={NotFound} /> </Switch> </Router> ); }; export default App; |
- The switch ensures that only one of the appropriate routers is visible at a time. It will only show the first router that matches the url and no other routers. For this reason, we have to put the final 404 component
- And a little more style will dc the 404 page to my liking
- demo page 404: https://codesandbox.io/s/pedantic-mcnulty-iktm8?file=/src/NotFound.js