app/components/not-found-help.tsx

Functions

Imports

It imports app/components/search-form.tsx, app/lib/nav.ts, app/lib/not-found-query.mjs. Imported by app/components/error-page.tsx.

Source

1import { Link, useLocation } from "react-router";
2
3import { SearchForm } from "~/components/search-form";
4import { NAV } from "~/lib/nav";
5import { notFoundQuery } from "~/lib/not-found-query.mjs";
6// `?url` and in-body links, not module imports: the root error boundary renders this, and a module
7// import there would put the search page's sheets on every page of the site.
8import blogSearchCssUrl from "~/styles/blog-search.css?url";
9import searchPageCssUrl from "~/styles/search-page.css?url";
10
11/**
12 * Somewhere to go from a 404, for a reader who came in on an old link: the site search, started
13 * with the words of the missing address, and the header's own sections. The sections are NAV, so
14 * this list follows the header and is never a second copy of it. No script: the form is a plain GET.
15 */
16export function NotFoundHelp() {
17  const { pathname } = useLocation();
18  return (
19    <>
20      {/* No `precedence`: React would lift the sheets above the color-scheme meta. */}
21      <link rel="stylesheet" href={searchPageCssUrl} />
22      <link rel="stylesheet" href={blogSearchCssUrl} />
23      <SearchForm defaultValue={notFoundQuery(pathname)} />
24      <nav aria-labelledby="not-found-sections">
25        <h2 id="not-found-sections">Or start from a section</h2>
26        <ul>
27          {NAV.map((item) => (
28            <li key={item.to}>
29              <Link to={item.to}>{item.label}</Link>
30            </li>
31          ))}
32        </ul>
33      </nav>
34    </>
35  );
36}