Frontity Tutorial
  • 👋Welcome
  • ✔️Checking your progress
  • 1️⃣ Creating a custom theme
    • Create a Frontity Project
    • Create a Theme Package
    • Modify the <Root> component
    • Connect the <Root> component to the state
  • 2️⃣ Adding a menu
    • Use the <Link> component
  • 3️⃣ Displaying posts
    • Understanding the Frontity state
    • Display the list of posts
    • Display the post content
    • Display posts and pages separately
    • Formatting the date
  • 4️⃣ Adding styling
    • Global styles
    • Styled components
    • Styling the links
    • Styling the post info
    • Add dynamic styling
  • 5️⃣ Adding behaviour
    • Use 'state' and 'actions'
    • Add pagination
  • 6️⃣ Custom Post Types
    • Add support for Custom Post Types
  • 7️⃣ Finishing touches
    • Add a <Loading> component
    • Add a 404 page
    • Use the <html2react> component
    • SEO and head tags
    • Other things to do
  • 8️⃣ Deploying the project
    • Deploy to Vercel
  • 9️⃣ Next Steps
    • Learning resources
    • Getting help and support
    • Contributing to Frontity
Powered by GitBook
On this page
  1. 7️⃣ Finishing touches

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:

// 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.

// 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.

PreviousAdd a <Loading> componentNextUse the <html2react> component

Last updated 4 years ago

Frontity in the browser

Check you're on the right track by comparing your changes with .

the ones in this commit