Upgrade React Router to v4

[lindenmckenzie]

What

Upgrade react router to 4.3.1 and it's accompanying changes.

• Link moved to react-router-dom package
• Switch to use of NavLink for react-router links
• Route can no longer be nested - this has forced quite a lot of rework for both the general routing components (e.g. breaking into Switch but also to the tests which now require a Router to wrap mounted components. I have also removed the CollectionRouteWrapper in favour of withCollectionDetails to wrap the collection based routes.
• useHistory refactored into use of createBrowserHistory from history package attached to connected-react-router (below)
• switch to use connected-react-router from react-router-redux(largely a drop in change)
• RouterProps now use a different signature - match: { uri: "", params: {}} rather than params directly - this has caused many changes.
• Migrated setRouteLeaveHook to use Prompt instead

There have been a few ancillary changes to either reduce noise or to correct longstanding issues as well, this includes things like combining imports, removing unused vars, sanitising strings etc.

How to review

Check looks good, logic is mostly repeated - I would recommend going commit by commit as this will help with pattern recognition.

Importantly switch EnablePermissionsAPI to true in the Go server. You'll need to run:

• Go Server
• React SPA
• API PF to sandbox
• FE Router PF to sandbox
• Publishing dataset controller PF to sandbox (for dataset routes)

To test it actually needs all routes and functionality from the react part to be checked:

• Collections
  • Create Collection
  • Edit Collection
  • Delete collection
  • Edit Homepage
  • Preview Homepage
  • Edit homepage field
  • Browse collections
• Datasets
  • View datasetsw
  • Create new filterable dataset
  • Create new recipe / cantabular dataset
  • View editions
  • Add edition to filterable dataset
  • Add version to filterable dataset
  • Upload new dataset
  • Edit metadata field
  • Edit cantabular metadata
• Users
  • Add user
  • Edit user
  • Suspend user
  • Add user to group
  • View users
• Groups
  • View all groups
  • Get groups report
  • Create new group
  • Edit group
• Security
  • Sign all users out
• Access
• Login (including redirect to wagtail / DCM)
• Logout
• Forgotten Password
• Old workspace
  • workspace
  • publishing queue
• Not found

The following have not been tested / are acknowledged to not work:

• Logs
• Restore Content (now removed)
• Selector Test (now removed)
• Upload Test (now removed)

Who can review

Someone who like long PRs.

[Copilot]

🟡 Changes recommended

Critical router-migration regressions remain (e.g., onEnter usage on Route, missing ConnectedRouter integration, and lingering location.query usage) that will break navigation/redirect behavior at runtime.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Upgrades the client-side routing stack from React Router v3 to v4.3.1 and migrates Redux routing integration to connected-react-router, updating route definitions, navigation components, and test utilities accordingly.

Changes:

• Bump routing dependencies (react-router@4.3.1, add react-router-dom, connected-react-router, history) and remove react-router-redux.
• Refactor route configuration (flatten nested routes into Switch/Route, add collection-detail wrapper HOC) and update components to use match.params / location.search.
• Update unit tests/snapshots and shared test wrappers to provide Router context compatible with v4.

File summaries

File	Description
src/package.json	Updates routing dependencies to React Router v4 + connected-react-router/history.
src/package-lock.json	Locks updated dependency tree for new routing packages.
src/index.js	Rebuilds top-level route tree using Switch/Route and new auth redirects.
src/app/views/workflow-preview/WorkflowPreview.test.js	Updates route props to v4-style match.params.
src/app/views/workflow-preview/WorkflowPreview.jsx	Moves push/Link imports and switches to match.params.
src/app/views/users/UsersList.test.js	Wraps renders in a router for v4 Link usage.
src/app/views/users/UsersList.jsx	Moves Link to react-router-dom and fixes prop usage (to).
src/app/views/users/groups/index.jsx	Renames mapped prop to isAdding for clarity/consistency.
src/app/views/users/groups/AddGroupsToUser.test.jsx	Updates tests to v4 routing props and wrapper usage.
src/app/views/users/groups/AddGroupsToUser.jsx	Migrates leave-hook behavior to Prompt and uses match.params.
src/app/views/users/groups/snapshots/AddGroupsToUser.test.jsx.snap	Snapshot updates due to link/render changes.
src/app/views/users/edit/EditUser.test.jsx	Updates tests for match.params + router wrapper.
src/app/views/users/edit/EditUser.jsx	Migrates leave-hook behavior to Prompt and uses match.params.
src/app/views/users/edit/snapshots/EditUser.test.jsx.snap	Snapshot updates due to link/render changes.
src/app/views/users/create/CreateUser.test.jsx	Wraps in router-aware test wrapper.
src/app/views/users/create/CreateUser.jsx	Removes unused imports following router refactor.
src/app/views/users/create/snapshots/CreateUser.test.jsx.snap	Snapshot updates due to link/render changes.
src/app/views/uploads/dataset/uploads-components/DatasetUploadJobs.test.js	Updates tests to use new shared wrapper/router context.
src/app/views/uploads/dataset/uploads-components/DatasetUploadJobs.jsx	Moves Link to react-router-dom.
src/app/views/uploads/dataset/upload-details/DatasetUploadMetadata.jsx	Switches to match.params and connected-react-router actions.
src/app/views/uploads/dataset/upload-details/DatasetUploadDetails.jsx	Switches to match.params and connected-react-router actions.
src/app/views/uploads/dataset/DatasetUploadsController.jsx	Migrates push import to connected-react-router.
src/app/views/systems/Systems.test.js	Replaces manual router context with shared wrapper.
src/app/views/preview/PreviewController.jsx	Uses match.params instead of legacy routeParams.
src/app/views/logs/Logs.jsx	Migrates query parsing to location.search + URLSearchParams.
src/app/views/login/SignIn.jsx	Migrates push import to connected-react-router.
src/app/views/homepage/edit/EditHomepageItem.test.js	Updates tests to v4-style match.params.
src/app/views/homepage/edit/EditHomepageItem.jsx	Migrates to match.params and updates propTypes accordingly.
src/app/views/homepage/edit/EditHomepageController.test.js	Adds ResumableJS mock for browser-only dependency in tests.
src/app/views/homepage/edit/EditHomepageController.jsx	Migrates routing actions and switches modal render strategy for v4.
src/app/views/homepage/edit/EditHomepage.jsx	Cleans unused Redux import.
src/app/views/groups/Groups.test.jsx	Wraps tests with router-aware wrapper.
src/app/views/groups/Groups.jsx	Moves Link to react-router-dom and trims unused setter.
src/app/views/groups/edit/index.jsx	Tidies thunk imports while migrating routing.
src/app/views/groups/edit/EditGroup.test.jsx	Updates tests for v4 routing props and wrapper usage.
src/app/views/groups/edit/EditGroup.jsx	Migrates leave-hook behavior to Prompt and uses match.params.
src/app/views/groups/edit/snapshots/EditGroup.test.jsx.snap	Snapshot updates due to link/render changes.
src/app/views/groups/create/CreateGroup.jsx	Migrates leave-hook behavior to Prompt and updates routing actions.
src/app/views/groups/create/snapshots/CreateGroup.test.js.snap	Snapshot updates due to link/render changes.
src/app/views/groups/snapshots/Groups.test.jsx.snap	Snapshot updates due to link/render changes.
src/app/views/datasets-new/versions/DatasetVersionsController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/versions/DatasetVersionsController.jsx	Migrates routing actions and switches to match.params.
src/app/views/datasets-new/editions/DatasetEditionsController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/editions/DatasetEditionsController.jsx	Migrates routing actions and switches to match.params.
src/app/views/datasets-new/edit-metadata/EditMetadataItem.jsx	Switches to match.params for metadata field selection.
src/app/views/datasets-new/edit-metadata/DatasetMetadataController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/edit-metadata/DatasetMetadataController.jsx	Migrates routing actions and switches to match.params.
src/app/views/datasets-new/edit-metadata/DatasetMetadata.jsx	Moves Link to react-router-dom.
src/app/views/datasets-new/edit-metadata-cantabular/CantabularMetadataController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/edit-metadata-cantabular/CantabularMetadataController.jsx	Migrates routing actions and switches to match.params.
src/app/views/datasets-new/edit-metadata-cantabular/CantabularMetadata.jsx	Moves Link to react-router-dom.
src/app/views/datasets-new/DatasetsController.jsx	Migrates push import to connected-react-router.
src/app/views/datasets-new/create/CreateVersionController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/create/CreateVersionController.jsx	Migrates routing actions and switches to match.params.
src/app/views/datasets-new/create/CreateEditionController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/create/CreateEditionController.jsx	Migrates routing actions and switches to match.params.
src/app/views/datasets-new/create/CreateDatasetTaxonomyController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/create/CreateDatasetTaxonomyController.jsx	Migrates routing actions and switches to match.params.
src/app/views/datasets-new/create/CreateDatasetController.jsx	Migrates push import to connected-react-router.
src/app/views/datasets-new/create/CreateCantabularDatasetController.test.js	Updates tests to v4-style match.params.
src/app/views/datasets-new/create/CreateCantabularDatasetController.jsx	Migrates routing actions and switches to match.params.
src/app/views/content/CreateContent.test.js	Updates tests for v4 routing props and wrapper usage.
src/app/views/content/CreateContent.jsx	Switches to match.params for collection-scoped links.
src/app/views/collections/edit/CollectionEditController.jsx	Migrates push import to connected-react-router.
src/app/views/collections/details/withCollectionDetails.test.js	Adds unit tests for new collection-details wrapper HOC.
src/app/views/collections/details/withCollectionDetails.jsx	Introduces HOC replacing removed CollectionRoutesWrapper behavior.
src/app/views/collections/details/CollectionDetailsController.test.js	Updates routing-related assertions to use ownProps.location.
src/app/views/collections/details/CollectionDetailsController.jsx	Removes v3 routes dependency and updates routing-derived state logic.
src/app/views/collections/details/CollectionDetails.jsx	Moves Link and push to v4/connected-react-router.
src/app/views/collections/Collections.test.js	Updates tests for v4-style match.params and localStorage setup.
src/app/views/collections/Collections.jsx	Uses match.params and passes location/match downstream.
src/app/utilities/tests/test-utils.js	Updates shared test wrapper to provide store + router context.
src/app/utilities/redirect.test.js	Expands redirect sanitisation and routing-behavior test coverage.
src/app/utilities/redirect.js	Migrates to history-based navigation and adds redirect-path sanitisation.
src/app/utilities/logging/log.js	Switches route-change listening to shared history.
src/app/utilities/log.js	Switches route-change listening to shared history.
src/app/global/collection-wrapper/CollectionRoutesWrapper.test.js	Removes tests for deprecated wrapper (replaced by HOC).
src/app/global/collection-wrapper/CollectionRoutesWrapper.jsx	Removes deprecated wrapper (replaced by HOC).
src/app/config/thunks.js	Migrates push import to connected-react-router.
src/app/config/store.js	Replaces react-router-redux store wiring with connected-react-router/history.
src/app/config/previous-route-middleware.js	Updates LOCATION_CHANGE import to connected-react-router.
src/app/config/groups/thunks.js	Migrates push import to connected-react-router.
src/app/components/simple-selectable-list/SimpleSelectableListItem.jsx	Moves Link to react-router-dom.
src/app/components/preview-nav/PreviewNav.jsx	Migrates push import to connected-react-router.
src/app/components/navbar/SystemNavBar.test.js	Moves Link to react-router-dom in tests.
src/app/components/navbar/SystemNavBar.jsx	Moves Link to react-router-dom.
src/app/components/navbar/NavBar.test.js	Updates tests for NavLink usage.
src/app/components/navbar/NavBar.jsx	Switches navigation items to NavLink for active styling.
src/app/components/layout/Layout.test.js	Simplifies test setup using shared wrapper and fixes assertions.
src/app/components/form-footer/FormFooter.jsx	Moves Link to react-router-dom and removes duplicate props.
src/app/components/file-upload/bind.js	Adds clarification about ResumableJS loading/mocking.
src/app/components/back-button/BackButton.jsx	Moves Link to react-router-dom and removes legacy hook import.

Review details

Files not reviewed (1)

• src/package-lock.json: Generated file

Suppressed comments (1)

src/app/views/uploads/dataset/uploads-components/DatasetUploadJobs.test.js:101

• This test currently passes for the wrong reason: shallow(<WrapperComponent ...>) won’t render through Provider/MemoryRouter, so component.find(DatasetUploadJobs) returns 0 nodes and setProps throws. Also, the component only calls console.warn (it doesn’t throw). Prefer mounting and asserting on console.warn.

• Files reviewed: 91/92 changed files
• Comments generated: 5
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🔵 Needs a closer look

It’s a large routing-stack migration and currently includes confirmed build-breaking issues (e.g., invalid module-scope JSX comment in src/index.js) plus behavioral bugs that require manual verification.

Review details

Files not reviewed (1)

• src/package-lock.json: Generated file

• Files reviewed: 92/93 changed files
• Comments generated: 5
• Review effort level: Lite