Page History Trail 404 Error Block for React

In the demo it's typed: TRAIL lists four pages and MISSING the address that failed. A page can't read the browser's history entries, only how many there are, so in your app keep the trail yourself: for example the last few routes your router visited, in memory or in session storage, passed in here. document.referrer gives only the one page before, and only when the browser sends it.

Clear hides the trail and shows "Your trail is empty. Nothing is kept in this browser", a polite status line says the same, and the way back changes to "Go to Projects" because the last good page is no longer known. The same button, now labelled Restore trail, puts the typed trail back. Both states share one space, so the band never changes height, and focus stays on the button.

The page before the failure is the one most likely to hold what the visitor was doing: here they went from Export to Comments, then followed a link to a comment thread that has been deleted. So "Back to Comments" is the first control in the tab order, and Comments carries the words "Last good page", not only a filled dot. The missing page is a dashed ring and not a link, since there is nothing to open.

Every link goes to #: point each stop at its real route. Clearing and restoring only change the page's state; nothing is stored and nothing leaves the page. The 404 status is your server's job, so render the page from your framework's not-found route.

It's an ordered list named "Pages you visited, oldest first", each stop a link with its name and its address, which stays left to right in a right-to-left page. The dots and the hairline are decoration. The missing page is read as "This page, not found" with its address. Clearing the trail is announced in a polite status line.

The way back stays on the first screen. The trail then becomes a vertical list with a hairline joining the dots, the missing page last, and the Clear button under it. From the md breakpoint the five stops sit in a row along the rule.