Hands-On Full-Stack Web Development with GraphQL and React

Catch-all routes in React Router

Currently, we have two paths set up, which are /app and /. If a user visits a non-existent path, such as /test, they will see an empty screen. The solution is to implement a route that matches any path. For simplicity, we redirect the user to the root of our application, but you could easily replace the redirection with a typical 404 page.

Add the following code to the router.js file:

class NotFound extends Component {  render() {    return (      <Redirect to="/"/> );  }}

The NotFound component is minimal. It just redirects the user to the root path. Add the next Route component to the Switch in the Router. Ensure that it is the last one on the list:

<Route component={NotFound} />

As you can see, we are rendering a ...