Linked to Issue: #126
Create a hook useRouteHead that leverages React Router's useMatches and useLocation hooks to fetch a property head from a PageHandle object passed through the router.
This is used to pass page-specific titles and head tags to the <Head /> component based on the route. If a route head is found containing a title attribute, that will be used to set the title, otherwise it will use a default title string.
Documentation is created in app/hooks/README.md for this new useRouteHead hook.
This PR creates PageHandles for the routes /documentation, /error, and * containing titles.
Changes
Update app/HTMLBody/__tests__/index.test.js to mock the <Head> component (using useMatches requires a component to be wrapped in a data router)
Update app/Head/index.tsx to leverage useRouteHead to fetch a route-specific title
If found, route-specific title will be used, otherwise uses default site title
Update app/Layout/__tests__/index.test.js to mock the <Head> component (using useMatches requires a component to be wrapped in a data router)
Fix erroneous descriptions in app/dataRoutes/__tests__/index.test.js
Add route handles to app/dataRoutes/index.ts for /documentation, /error, *
Add documentation for useRouteHead in app/hooks/README.md
Create hook app/hooks/useRouteHead.ts to retrieve any Page Handles in the route chain
Add types RouteHead, PageHandle, and PageMatch to app/types.ts
Create route handle for /documentationpages/Documentation/handle.tsx
Create route handle for /errorpages/ErrorPage/handle.tsx
Create route handle for *pages/NotFound/handle.tsx
Steps to QA
Pull down and switch to this branch
Run the app and ensure it runs without issue
Verify in browser that pages render without issue
Verify page titles change between /, /documentation, /error, and /foobar
Change a title in one of the route handles and see that the respective route changes title tag contents in browser
Description
Linked to Issue: #126 Create a hook
useRouteHeadthat leverages React Router's useMatches and useLocation hooks to fetch a propertyheadfrom aPageHandleobject passed through the router.This is used to pass page-specific titles and head tags to the
<Head />component based on the route. If a route head is found containing atitleattribute, that will be used to set the title, otherwise it will use a default title string.Documentation is created in
app/hooks/README.mdfor this newuseRouteHeadhook.This PR creates PageHandles for the routes
/documentation,/error, and*containing titles.Changes
app/HTMLBody/__tests__/index.test.jsto mock the<Head>component (usinguseMatchesrequires a component to be wrapped in a data router)app/Head/index.tsxto leverageuseRouteHeadto fetch a route-specific titleapp/Layout/__tests__/index.test.jsto mock the<Head>component (usinguseMatchesrequires a component to be wrapped in a data router)app/dataRoutes/__tests__/index.test.jsapp/dataRoutes/index.tsfor/documentation,/error,*useRouteHeadinapp/hooks/README.mdapp/hooks/useRouteHead.tsto retrieve any Page Handles in the route chainRouteHead,PageHandle, andPageMatchtoapp/types.ts/documentationpages/Documentation/handle.tsx/errorpages/ErrorPage/handle.tsx*pages/NotFound/handle.tsxSteps to QA
/,/documentation,/error, and/foobar