404 Page | Yext 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.
Note
The 404 page will currently only appear in production, not in local dev. To test out your 404 page, make a deploy (
follow these steps
) and check out your 404 page at a production URL.
Here is a simple example that just prints 404 - Page Not Found:
// src/templates/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;
<% elem.innerText %>