Fix deprecated route syntax generated by form system

[alexandec]

User story(ies)

As a VSP engineer, I want to upgrade React Router to enable additional features for VFS developers, and to keep the router up to date with the rest of React.

This upgrade is currently blocked by deprecated route syntax generated by the form system.

Additional details/notes/links

Apps use the form system to generate child routes based on the formConfig like this:

const routes = [
  {
    path: '/',
    component: Form5490App,
    indexRoute: { onEnter: (nextState, replace) => replace('/introduction') },
    childRoutes: createRoutesWithSaveInProgress(formConfig),
  },
];

The generated child routes are returned from createRoutesWithSaveInProgress() as a JS object. The object is compatible with react-router version 3 which we are currently using. However in newer versions of react-router, routes must be defined using router components instead. In order to upgrade react-router, the form system must first return routes with the new format.

In addition, it could be useful to make a small change in RoutedSavableApp. Currently it's used like this:

export default function App({ location, children }) {
  return (
    <RoutedSavableApp formConfig={formConfig} currentLocation={location}>
      {children}
    </RoutedSavableApp>
  );
}

The currentLocation is passed into RoutedSavableApp by the parent component. But with react-router v5, the useLocation() hook is provided as a method to retrieve the location anywhere in the component hierarchy. So it should no longer be necessary for the parent to pass in the location as a prop.

Additional documentation:

• This post provides further detail with a before and after on the routing structure when upgrading.
• Ticket #34572 (Upgrade react-router from v3 to v5.1.2) lists further information about the upgrade process.
• The VAOS app already uses the new routing structure. It might be a useful reference.

Acceptance criteria

• Form system generates routes in the new format required by react-router v5+
• Apps using the form system operate correctly with the new format

Point(s) of contact

• @alexandec (Chris Alexander)
• @timwright12 (Tim Wright)
• @laineymajor (Lainey Trahan)

What type of issue is this?

• Bug
• Request new feature
• Request update to existing feature
• Documentation change
• Other (please describe)

How to configure this issue

• When ticket is opened, assign to Epic #12765 Forms library user feedback and requests to be triaged
• FE Tools team will triage and add to Design System Governance Process Project Board as applicable

[alexandec]

FYI I've created a React Router Guidelines page which may also be useful.

[taylorkaren]

First step is to upgrade to React Router 5. Joint effort between FLT and Front End Tools team and any other relevant team(s).

[taylorkaren]

The Forms Library Team is no longer working on a React Router V3 --> V5 upgrade. Given that V3 and V5 apps currently co-exist on Vets Website, and that any form apps on Router V3 will need a rewrite to migrate to the new VA Forms System Core (VAFSC) anyway, providing a migration path from React Router V3 to V5 is a step that doesn't provide a good return on time invested for the Forms Library Team.

For details on this decision, please see these Confluence pages:

• 2022-07-15 PO Check in with Matt
• React Router V3 - V5 Post Mortem

The Forms Library Team will instead be working on a React Router V5 --> V6 upgrade, see this ticket for details.

Other tickets that reference React Router V3 -V5 upgrades:

• Upgrade react-router from v3 to v5.1.2
• Update form routers to be compatible with v5

[taylorkaren]

Katy will talk to Chris A. about closing this out.