Documentation support - Githubissues

carlosfelix2 commented 6 months ago

Request type

[ ] Writing new documentation
[ ] Updating previously published documentation
[X] Reviewing recently written, never-before-published drafts

Number of docs

1

Subject matter expert

Carlos Felix (carlos.felix@agile6.com)

Approvals

no

Embedded media

[ ] Screenshot(s)
[ ] Diagram(s)
[ ] Video(s)

Audience

[X] Developers
[ ] Designers and researchers
[ ] Product managers
[ ] Other

Anything else?

The Cartographers team worked on implementing a similar experience to a 404 page for React apps due to some apps displaying partial renders when visiting unknown URLs that landed within the app. See original findings in this Slack Canvas. We implemented a shared component to duplicate the 404 experience on the Drupal side and added it to some of the health applications. Other health teams have an open ticket to implement this change as well. We would like to publish this information in the developer docs, so all teams creating apps can replicate this user experience.

Proposed Location of Content

It is proposed to add this content to the already existing page titled React Router Guidelines as the 404 page needs to be added to the routes accordingly. It is also proposed that this content is placed anywhere AFTER the Define routes using components section (perhaps at the end).

Proposed Content

Section title: Handle unknown URLs by displaying a page not found

Section Content: Handle unknown URL paths that fall within your application’s root URL by setting a default route that displays a page not found. This will provide the same 404 not-found-error user experience as for the static pages. This default route will trigger when no other routes are matched, so care must be taken to specify your valid route paths as detailed as possible to catch all instances of unknown paths. In the sample below, a path of /first/dummy will display a page not found because the path does not match any routes (note the first route only matches /first as it is exact), but a path of /second/dummy will route to the SecondComponent since that route is not exact.

import { Switch, Route } from 'react-router-dom';
import PageNotFound from '@department-of-veterans-affairs/platform-site-wide/PageNotFound';

<Switch>
  <Route exact path="/first">
    <FirstComponent />
  </Route>
  <Route path="/second">
    <SecondComponent />
  </Route>
  <Route>
    <PageNotFound />
  </Route>
</Switch>

Note that you need to render the PageNotFound component by itself (e.g. no breadcrumbs, side navigation, etc.) for the proper user experience.

jknipes commented 5 months ago

Hi @carlosfelix2, thanks for your content suggestions. The Platform Content team will review your request and put it in our backlog to refine for next steps

jknipes commented 5 months ago

@carlosfelix2 someone from our team will reach out to you to work on adding this content

taylojill commented 5 months ago

Hi @carlosfelix2 - I added your content to the React Router Guidelines page in our Confluence draft space. See attached pdf with updates in blue font color. I added the section to the bottom of the page. Let me know if this works, and I'll get the updated page published by Monday 6/10/2024 at 5pm. Questions, please let me know. Thank you!

cc @jknipes PWD-Draft Copy of React Router Guidelines-070624-182814.pdf