404 Page| Hitchhikers Platform

To create a custom 404 page, you should create a static template and place it in the templates directory: src/templates/404.tsx . In your template, the path returned from getPath must be “404.html.” The pages serving system will automatically serve this 404 page anytime a user visits a route that is not found.

light bulb
Tip
The 404 page will currently only appear in production - not in local dev. To test out your 404 page, make a deploy (directions here) and check out your 404 page at a production URL.

Here is a simple example that just prints 404 - Page Not Found

// src/template/404.tsx
import {
    TemplateProps,
    TemplateRenderProps,
    GetHeadConfig,
    GetPath,
    Template,
} from "@yext/pages";
import * as React from "react";

// The path must be exactly 404.html
export const getPath: GetPath<TemplateProps> = () => {
    return "404.html";
};

// Add a title to the page
export const getHeadConfig: GetHeadConfig<TemplateRenderProps> = () => {
    return {
        title: "Page Not Found",
    };
};

// Template that will show as the page
const FourOhFour: Template<TemplateRenderProps> = () => {
    return (
        <h1>404 - Page Not Found</h1>
    );
};

export default FourOhFour;