404 With Address Guesses Error Block for React

Each guess is typed as parts of its address, each a kept part, a part that went or a part that is new. A part that went is struck through, a new part is underlined, and the badge names the whole change in a word, so none of it depends on color. Screen readers hear "Gone:" and "New:" before those parts, and a sentence after the row says what changed.

Yes: native radio inputs inside a radio group, the same on every target. Tab lands on the group once, the arrow keys move between the guesses and choose as they go, and the first guess is chosen to begin with. The whole row is the label, so clicking anywhere on it chooses it, and the chosen row gets a tint and a filled dot.

It is a link whose words follow the choice ("Open" and the address in monospace), and a polite status message says the button now opens that address. In this demo it points at # and goes nowhere. Point its href at the chosen guess's address, which addressOf builds from the parts.

From the typed Guess objects at the top of the file: a reason, a word for the change, the parts of the address and a sentence for screen readers. In your app build them from your redirect rules, a search of old addresses or the segments of the failed path: drop the last part, drop a section that moved, or swap it for the archive.

The block draws the page; the status comes from your server. Answer with a real 404 even though the page offers likely destinations. If you know exactly where a page moved, redirect it permanently instead, and keep this page for the cases you can only guess.

The rows stack as they are, the addresses wrap onto more lines inside their rows, and the badges stay at the end of each reason. The button spans the width and is on the first screen.