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;
Feedback