diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
index 616358f24e..88a57390c2 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { WorkflowStateContext } from '@contexts/Workflow';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
@@ -56,7 +56,8 @@ const NodeDefaultLabel = styled.p`
   white-space: nowrap;
 `;
 
-function WorkflowOutputNode({ history, i18n, mouseEnter, mouseLeave, node }) {
+function WorkflowOutputNode({ i18n, mouseEnter, mouseLeave, node }) {
+  const history = useHistory();
   const { nodePositions } = useContext(WorkflowStateContext);
   let borderColor = '#93969A';
 
@@ -130,4 +131,4 @@ WorkflowOutputNode.propTypes = {
   node: shape().isRequired,
 };
 
-export default withI18n()(withRouter(WorkflowOutputNode));
+export default withI18n()(WorkflowOutputNode);
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.jsx
index 27e720aba8..abde0f548f 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.jsx
@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import {
   WorkflowDispatchContext,
   WorkflowStateContext,
@@ -16,7 +16,8 @@ import Wizard from '@components/Wizard';
 import { NodeTypeStep } from './NodeTypeStep';
 import { RunStep, NodeNextButton } from '.';
 
-function NodeModal({ askLinkType, history, i18n, onSave, title }) {
+function NodeModal({ askLinkType, i18n, onSave, title }) {
+  const history = useHistory();
   const dispatch = useContext(WorkflowDispatchContext);
   const { nodeToEdit } = useContext(WorkflowStateContext);
 
@@ -210,4 +211,4 @@ NodeModal.propTypes = {
   title: node.isRequired,
 };
 
-export default withI18n()(withRouter(NodeModal));
+export default withI18n()(NodeModal);
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx
index 0b84075039..754d0765e3 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx
@@ -3,7 +3,7 @@ import {
   WorkflowDispatchContext,
   WorkflowStateContext,
 } from '@contexts/Workflow';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import styled from 'styled-components';
 import { shape } from 'prop-types';
@@ -65,7 +65,8 @@ const fetchWorkflowNodes = async (
   return workflowNodes.concat(data.results);
 };
 
-function Visualizer({ history, template, i18n }) {
+function Visualizer({ template, i18n }) {
+  const history = useHistory();
   const [state, dispatch] = useReducer(workflowReducer, {
     addLinkSourceNode: null,
     addLinkTargetNode: null,
@@ -467,4 +468,4 @@ Visualizer.propTypes = {
   template: shape().isRequired,
 };
 
-export default withI18n()(withRouter(Visualizer));
+export default withI18n()(Visualizer);