Catch-All Route

Introduction

In this section, we will discuss how to handle routes that do not match any defined paths using the * route, also known as a catch-all route.

This pattern is useful for rendering a “404 Not Found” page when a user navigates to a path that doesn’t exist in your application.

Defining a Catch-All Route

To define a catch-all route, you can use the * wildcard in your route configuration. This route will match any path that hasn’t been matched by previous routes.

1
{
2
  path: '/', component: () => <Layout />,
3
  children: [
4
    { index: true, component: () => <Navigate to="/categories" />, memo: false },
5
    { path: '/categories', component: Categories },
6
    { path: '/recipes', component: Recipes, memo: false },
7
    {
8
      path: 'recipe',
9
      component: () => <Navigate to="/recipes" />,
10
      children: [
11
        { path: ':id', component: Recipe },
12
      ]
13
    },
14
    { path: '*', component: () => <div>404 Not Found</div> }
15
  ]
16
}

In this example, the * route is used to define a catch-all route that renders a “404 Not Found” page when no other routes match the current path.

Nested Catch-All Routes

You can also define nested catch-all routes to handle 404 pages within specific sections of your application.

1
{
2
  path: '/', component: () => <Layout />,
3
  children: [
4
    { index: true, component: () => <Navigate to="/categories" />, memo: false },
5
    { path: '/categories', component: Categories },
6
    { path: '/recipes', component: Recipes, memo: false },
7
    {
8
      path: 'recipe',
9
      component: () => <Navigate to="/recipes" />,
10
      children: [
11
        { path: ':id', component: Recipe },
12
        { path: 'overview', component: () => <div>Overview</div> },
13
        { path: '*', component: () => <div>Recipe Not Found</div> }
14
      ]
15
    },
16
    { path: '*', component: () => <div>404 Not Found</div> }
17
  ]
18
}

In this example, there is a nested catch-all route within the recipe path that renders a “Recipe Not Found” page when no other routes match within the recipe section.