# Add a 404 page

And now we come to a nice easy step. All we need to do here is create a component to inform the user that the page can't be found and then use it in our `<Root>` component.

First create a new file in the `components` directory. Call it `error.js` and put this code in the file:

```jsx
// File: /packages/my-first-theme/src/components/error.js

import React from "react"
import { connect } from "frontity"

const Error = ({ state }) => {
  return (
    <>
      <h2>404 Error</h2>
      <p>
        The path <em>{state.router.link}</em> cannot be found.
      </p>
    </>
  )
}

export default connect(Error)
```

It's not really necessary to connect the component to the state if you just want to display a simple error message, but here we want to show the path that resulted in the 404 error.

It remains for us to use it in our `<Root>` component. First we import the `<Error>` component, then we add it as the last item in our `<Switch>` component which selects what component to use depending on the first matching condition.

```jsx
// File: /packages/my-first-theme/src/components/index.js

// ...
import Error from "./error"

// ...
;<Switch>
  <Loading when={data.isFetching} />
  <List when={data.isArchive} />
  <Page when={data.isPage} />
  <Post when={data.isPost} />
  <Page when={data.isDestinations} />
  <Error when={data.isError} />
</Switch>
// ...
```

And that's it! As we said earlier, this was a nice easy step. Now if you try navigating to a path that doesn't exist the `<Error>` component will display informing the user of the error.

![Frontity in the browser](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part7img2.png)

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/34e875c1baa77881b1430511eec8096b3a394bbf).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/part7-finishing-touches/add-a-404-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.