Converts most of our route render prop usage to children

awx/ui_next/src/components/Schedule/Schedule.jsx

@@ -111,26 +111,17 @@ function Schedule({ i18n, setBreadcrumb, unifiedJobTemplate }) {
           <Route
             key="details"
             path={`${pathRoot}schedules/:scheduleId/details`}
-            render={() => {
+          >
-              return <ScheduleDetail schedule={schedule} />;
+            <ScheduleDetail schedule={schedule} />
-            }}
+          </Route>,
-          />,
         ]}
-        <Route
+        <Route key="not-found" path="*">
-          key="not-found"
-          path="*"
-          render={() => {
-            return (
           <ContentError>
             {unifiedJobTemplate && (
-                  <Link to={`${pathRoot}details`}>
+              <Link to={`${pathRoot}details`}>{i18n._(t`View Details`)}</Link>
-                    {i18n._(t`View Details`)}
-                  </Link>
             )}
           </ContentError>
-            );
+        </Route>
-          }}
-        />
       </Switch>
     </>
   );

awx/ui_next/src/components/Schedule/Schedules.jsx

@@ -14,32 +14,21 @@ function Schedules({
 
   return (
     <Switch>
-      <Route
+      <Route path={`${match.path}/add`}>
-        path={`${match.path}/add`}
+        <ScheduleAdd createSchedule={createSchedule} />
-        render={() => <ScheduleAdd createSchedule={createSchedule} />}
+      </Route>
-      />
+      <Route key="details" path={`${match.path}/:scheduleId`}>
-      <Route
-        key="details"
-        path={`${match.path}/:scheduleId`}
-        render={() => (
         <Schedule
           unifiedJobTemplate={unifiedJobTemplate}
           setBreadcrumb={setBreadcrumb}
         />
-        )}
+      </Route>
-      />
+      <Route key="list" path={`${match.path}`}>
-      <Route
-        key="list"
-        path={`${match.path}`}
-        render={() => {
-          return (
         <ScheduleList
           loadSchedules={loadSchedules}
           loadScheduleOptions={loadScheduleOptions}
         />
-          );
+      </Route>
-        }}
-      />
     </Switch>
   );
 }

awx/ui_next/src/screens/Credential/Credential.jsx

@@ -98,33 +98,22 @@ function Credential({ i18n, setBreadcrumb }) {
             exact
           />
           {credential && [
-            <Route
+            <Route key="details" path="/credentials/:id/details">
-              key="details"
+              <CredentialDetail credential={credential} />
-              path="/credentials/:id/details"
+            </Route>,
-              render={() => <CredentialDetail credential={credential} />}
+            <Route key="edit" path="/credentials/:id/edit">
-            />,
+              <CredentialEdit credential={credential} />
-            <Route
+            </Route>,
-              key="edit"
-              path="/credentials/:id/edit"
-              render={() => <CredentialEdit credential={credential} />}
-            />,
             credential.organization && (
-              <Route
+              <Route key="access" path="/credentials/:id/access">
-                key="access"
-                path="/credentials/:id/access"
-                render={() => (
                 <ResourceAccessList
                   resource={credential}
                   apiModel={CredentialsAPI}
                 />
-                )}
+              </Route>
-              />
             ),
-            <Route
+            <Route key="not-found" path="*">
-              key="not-found"
+              {!hasContentLoading && (
-              path="*"
-              render={() =>
-                !hasContentLoading && (
                 <ContentError isNotFound>
                   {match.params.id && (
                     <Link to={`/credentials/${match.params.id}/details`}>
@@ -132,15 +121,11 @@ function Credential({ i18n, setBreadcrumb }) {
                     </Link>
                   )}
                 </ContentError>
-                )
+              )}
-              }
+            </Route>,
-            />,
           ]}
-          <Route
+          <Route key="not-found" path="*">
-            key="not-found"
+            {!hasContentLoading && (
-            path="*"
-            render={() =>
-              !hasContentLoading && (
               <ContentError isNotFound>
                 {id && (
                   <Link to={`/credentials/${id}/details`}>
@@ -148,9 +133,8 @@ function Credential({ i18n, setBreadcrumb }) {
                   </Link>
                 )}
               </ContentError>
-              )
+            )}
-            }
+          </Route>
-          />
         </Switch>
       </Card>
     </PageSection>

awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx

@@ -1,20 +1,14 @@
 import React from 'react';
 import { withI18n } from '@lingui/react';
-
 import { Switch, Route } from 'react-router-dom';
-
 import HostGroupsList from './HostGroupsList';
 
 function HostGroups({ host }) {
   return (
     <Switch>
-      <Route
+      <Route key="list" path="/hosts/:id/groups">
-        key="list"
+        <HostGroupsList host={host} />
-        path="/hosts/:id/groups"
+      </Route>
-        render={() => {
-          return <HostGroupsList host={host} />;
-        }}
-      />
     </Switch>
   );
 }

awx/ui_next/src/screens/Inventory/Inventories.jsx

@@ -85,14 +85,12 @@ class Inventories extends Component {
       <>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route
+          <Route path={`${match.path}/inventory/add`}>
-            path={`${match.path}/inventory/add`}
+            <InventoryAdd />
-            render={() => <InventoryAdd />}
+          </Route>
-          />
+          <Route path={`${match.path}/smart_inventory/add`}>
-          <Route
+            <SmartInventoryAdd />
-            path={`${match.path}/smart_inventory/add`}
+          </Route>
-            render={() => <SmartInventoryAdd />}
-          />
           <Route path={`${match.path}/inventory/:id`}>
             <Config>
               {({ me }) => (
@@ -119,7 +117,9 @@ class Inventories extends Component {
               </Config>
             )}
           />
-          <Route path={`${match.path}`} render={() => <InventoryList />} />
+          <Route path={`${match.path}`}>
+            <InventoryList />
+          </Route>
         </Switch>
       </>
     );

awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx

@@ -137,11 +137,7 @@ function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
             <InventoryGroupHosts inventoryGroup={inventoryGroup} />
           </Route>,
         ]}
-        <Route
+        <Route key="not-found" path="*">
-          key="not-found"
-          path="*"
-          render={() => {
-            return (
           <ContentError>
             {inventory && (
               <Link to={`/inventories/inventory/${inventory.id}/details`}>
@@ -149,9 +145,7 @@ function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
               </Link>
             )}
           </ContentError>
-            );
+        </Route>
-          }}
-        />
       </Switch>
     </>
   );

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx

@@ -11,32 +11,18 @@ import InventoryGroupsList from './InventoryGroupsList';
 function InventoryGroups({ setBreadcrumb, inventory }) {
   return (
     <Switch>
-      <Route
+      <Route key="add" path="/inventories/inventory/:id/groups/add">
-        key="add"
-        path="/inventories/inventory/:id/groups/add"
-        render={() => {
-          return (
         <InventoryGroupAdd
           setBreadcrumb={setBreadcrumb}
           inventory={inventory}
         />
-          );
+      </Route>
-        }}
+      <Route key="details" path="/inventories/inventory/:id/groups/:groupId/">
-      />
-      <Route
-        key="details"
-        path="/inventories/inventory/:id/groups/:groupId/"
-        render={() => (
         <InventoryGroup inventory={inventory} setBreadcrumb={setBreadcrumb} />
-        )}
+      </Route>
-      />
+      <Route key="list" path="/inventories/inventory/:id/groups">
-      <Route
+        <InventoryGroupsList />
-        key="list"
+      </Route>
-        path="/inventories/inventory/:id/groups"
-        render={() => {
-          return <InventoryGroupsList />;
-        }}
-      />
     </Switch>
   );
 }

awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx

@@ -8,13 +8,9 @@ import InventoryHostGroupsList from './InventoryHostGroupsList';
 function InventoryHostGroups() {
   return (
     <Switch>
-      <Route
+      <Route key="list" path="/inventories/inventory/:id/hosts/:hostId/groups">
-        key="list"
+        <InventoryHostGroupsList />
-        path="/inventories/inventory/:id/hosts/:hostId/groups"
+      </Route>
-        render={() => {
-          return <InventoryHostGroupsList />;
-        }}
-      />
     </Switch>
   );
 }

awx/ui_next/src/screens/Inventory/SmartInventory.jsx

@@ -119,33 +119,27 @@ class SmartInventory extends Component {
               <Route
                 key="details"
                 path="/inventories/smart_inventory/:id/details"
-                render={() => (
+              >
                 <SmartInventoryDetail
                   hasSmartInventoryLoading={hasContentLoading}
                   inventory={inventory}
                 />
-                )}
+              </Route>,
-              />,
+              <Route key="edit" path="/inventories/smart_inventory/:id/edit">
-              <Route
+                <SmartInventoryEdit inventory={inventory} />
-                key="edit"
+              </Route>,
-                path="/inventories/smart_inventory/:id/edit"
-                render={() => <SmartInventoryEdit inventory={inventory} />}
-              />,
               <Route
                 key="access"
                 path="/inventories/smart_inventory/:id/access"
-                render={() => (
+              >
                 <ResourceAccessList
                   resource={inventory}
                   apiModel={InventoriesAPI}
                 />
-                )}
+              </Route>,
-              />,
+              <Route key="hosts" path="/inventories/smart_inventory/:id/hosts">
-              <Route
+                <SmartInventoryHosts inventory={inventory} />
-                key="hosts"
+              </Route>,
-                path="/inventories/smart_inventory/:id/hosts"
-                render={() => <SmartInventoryHosts inventory={inventory} />}
-              />,
               <Route
                 key="completed_jobs"
                 path="/inventories/smart_inventory/:id/completed_jobs"
@@ -160,11 +154,8 @@ class SmartInventory extends Component {
                   }}
                 />
               </Route>,
-              <Route
+              <Route key="not-found" path="*">
-                key="not-found"
+                {!hasContentLoading && (
-                path="*"
-                render={() =>
-                  !hasContentLoading && (
                   <ContentError isNotFound>
                     {match.params.id && (
                       <Link
@@ -174,9 +165,8 @@ class SmartInventory extends Component {
                       </Link>
                     )}
                   </ContentError>
-                  )
+                )}
-                }
+              </Route>,
-              />,
             ]}
           </Switch>
         </Card>

awx/ui_next/src/screens/Job/Job.jsx

@@ -124,43 +124,25 @@ class Job extends Component {
               to="/jobs/:type/:id/output"
               exact
             />
-            <Route
+            {job &&
-              key="workflow-details"
+              job.type === 'workflow_job' && [
-              path="/jobs/workflow/:id/details"
+                <Route key="workflow-details" path="/jobs/workflow/:id/details">
-              render={() =>
+                  <WorkflowDetail job={job} />
-                job &&
+                </Route>,
-                job.type === 'workflow_job' && <WorkflowDetail job={job} />
+                <Route key="workflow-output" path="/jobs/workflow/:id/output">
-              }
+                  <WorkflowOutput job={job} />
-            />
+                </Route>,
-            <Route
+              ]}
-              key="workflow-output"
-              path="/jobs/workflow/:id/output"
-              render={() =>
-                job &&
-                job.type === 'workflow_job' && <WorkflowOutput job={job} />
-              }
-            />
             {job &&
               job.type !== 'workflow_job' && [
-                <Route
+                <Route key="details" path="/jobs/:type/:id/details">
-                  key="details"
-                  path="/jobs/:type/:id/details"
-                  render={() => (
                   <JobDetail type={match.params.type} job={job} />
-                  )}
+                </Route>,
-                />,
+                <Route key="output" path="/jobs/:type/:id/output">
-                <Route
-                  key="output"
-                  path="/jobs/:type/:id/output"
-                  render={() => (
                   <JobOutput type={match.params.type} job={job} />
-                  )}
+                </Route>,
-                />,
+                <Route key="not-found" path="*">
-                <Route
+                  {!hasContentLoading && (
-                  key="not-found"
-                  path="*"
-                  render={() =>
-                    !hasContentLoading && (
                     <ContentError isNotFound>
                       <Link
                         to={`/jobs/${match.params.type}/${match.params.id}/details`}
@@ -168,9 +150,8 @@ class Job extends Component {
                         {i18n._(`View Job Details`)}
                       </Link>
                     </ContentError>
-                    )
+                  )}
-                  }
+                </Route>,
-                />,
               ]}
           </Switch>
         </Card>

awx/ui_next/src/screens/Job/Jobs.jsx

@@ -4,6 +4,7 @@ import {
   Switch,
   useHistory,
   useLocation,
+  useParams,
   useRouteMatch,
 } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
@@ -18,6 +19,7 @@ import { JOB_TYPE_URL_SEGMENTS } from '@constants';
 function Jobs({ i18n }) {
   const history = useHistory();
   const location = useLocation();
+  const { id } = useParams();
   const match = useRouteMatch();
   const [breadcrumbConfig, setBreadcrumbConfig] = useState({
     '/jobs': i18n._(t`Jobs`),
@@ -52,34 +54,22 @@ function Jobs({ i18n }) {
             />
           </PageSection>
         </Route>
-        <Route
+        <Route path={`${match.path}/:id/details`}>
-          path={`${match.path}/:id/details`}
+          <JobTypeRedirect id={id} path={match.path} view="details" />
-          render={({ match: m }) => (
+        </Route>
-            <JobTypeRedirect id={m.params.id} path={m.path} view="details" />
+        <Route path={`${match.path}/:id/output`}>
-          )}
+          <JobTypeRedirect id={id} path={match.path} view="output" />
-        />
+        </Route>
-        <Route
+        <Route path={`${match.path}/:type/:id`}>
-          path={`${match.path}/:id/output`}
-          render={({ match: m }) => (
-            <JobTypeRedirect id={m.params.id} path={m.path} view="output" />
-          )}
-        />
-        <Route
-          path={`${match.path}/:type/:id`}
-          render={() => (
           <Job
             history={history}
             location={location}
             setBreadcrumb={buildBreadcrumbConfig}
           />
-          )}
+        </Route>
-        />
+        <Route path={`${match.path}/:id`}>
-        <Route
+          <JobTypeRedirect id={id} path={match.path} />
-          path={`${match.path}/:id`}
+        </Route>
-          render={({ match: m }) => (
-            <JobTypeRedirect id={m.params.id} path={m.path} />
-          )}
-        />
       </Switch>
     </>
   );

awx/ui_next/src/screens/Organization/Organization.jsx

@@ -176,51 +176,37 @@ class Organization extends Component {
               exact
             />
             {organization && (
-              <Route
+              <Route path="/organizations/:id/edit">
-                path="/organizations/:id/edit"
+                <OrganizationEdit organization={organization} />
-                render={() => <OrganizationEdit organization={organization} />}
+              </Route>
-              />
             )}
             {organization && (
-              <Route
+              <Route path="/organizations/:id/details">
-                path="/organizations/:id/details"
-                render={() => (
                 <OrganizationDetail organization={organization} />
-                )}
+              </Route>
-              />
             )}
             {organization && (
-              <Route
+              <Route path="/organizations/:id/access">
-                path="/organizations/:id/access"
-                render={() => (
                 <ResourceAccessList
                   resource={organization}
                   apiModel={OrganizationsAPI}
                 />
+              </Route>
             )}
-              />
+            <Route path="/organizations/:id/teams">
-            )}
+              <OrganizationTeams id={Number(match.params.id)} />
-            <Route
+            </Route>
-              path="/organizations/:id/teams"
-              render={() => <OrganizationTeams id={Number(match.params.id)} />}
-            />
             {canSeeNotificationsTab && (
-              <Route
+              <Route path="/organizations/:id/notifications">
-                path="/organizations/:id/notifications"
-                render={() => (
                 <NotificationList
                   id={Number(match.params.id)}
                   canToggleNotifications={canToggleNotifications}
                   apiModel={OrganizationsAPI}
                 />
+              </Route>
             )}
-              />
+            <Route key="not-found" path="*">
-            )}
+              {!hasContentLoading && (
-            <Route
-              key="not-found"
-              path="*"
-              render={() =>
-                !hasContentLoading && (
                 <ContentError isNotFound>
                   {match.params.id && (
                     <Link to={`/organizations/${match.params.id}/details`}>
@@ -228,9 +214,8 @@ class Organization extends Component {
                     </Link>
                   )}
                 </ContentError>
-                )
+              )}
-              }
+            </Route>
-            />
             ,
           </Switch>
         </Card>

awx/ui_next/src/screens/Organization/Organizations.jsx

@@ -55,13 +55,10 @@ class Organizations extends Component {
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route
+          <Route path={`${match.path}/add`}>
-            path={`${match.path}/add`}
+            <OrganizationAdd />
-            render={() => <OrganizationAdd />}
+          </Route>
-          />
+          <Route path={`${match.path}/:id`}>
-          <Route
-            path={`${match.path}/:id`}
-            render={() => (
             <Config>
               {({ me }) => (
                 <Organization
@@ -72,9 +69,10 @@ class Organizations extends Component {
                 />
               )}
             </Config>
-            )}
+          </Route>
-          />
+          <Route path={`${match.path}`}>
-          <Route path={`${match.path}`} render={() => <OrganizationsList />} />
+            <OrganizationsList />
+          </Route>
         </Switch>
       </Fragment>
     );

awx/ui_next/src/screens/Project/Project.jsx

@@ -192,50 +192,34 @@ class Project extends Component {
           <Switch>
             <Redirect from="/projects/:id" to="/projects/:id/details" exact />
             {project && (
-              <Route
+              <Route path="/projects/:id/edit">
-                path="/projects/:id/edit"
+                <ProjectEdit project={project} />
-                render={() => <ProjectEdit project={project} />}
+              </Route>
-              />
             )}
             {project && (
-              <Route
+              <Route path="/projects/:id/details">
-                path="/projects/:id/details"
+                <ProjectDetail project={project} />
-                render={() => <ProjectDetail project={project} />}
+              </Route>
-              />
             )}
             {project && (
-              <Route
+              <Route path="/projects/:id/access">
-                path="/projects/:id/access"
+                <ResourceAccessList resource={project} apiModel={ProjectsAPI} />
-                render={() => (
+              </Route>
-                  <ResourceAccessList
-                    resource={project}
-                    apiModel={ProjectsAPI}
-                  />
-                )}
-              />
             )}
             {canSeeNotificationsTab && (
-              <Route
+              <Route path="/projects/:id/notifications">
-                path="/projects/:id/notifications"
-                render={() => (
                 <NotificationList
                   id={Number(match.params.id)}
                   canToggleNotifications={canToggleNotifications}
                   apiModel={ProjectsAPI}
                 />
+              </Route>
             )}
-              />
+            <Route path="/projects/:id/job_templates">
-            )}
-            <Route
-              path="/projects/:id/job_templates"
-              render={() => (
               <ProjectJobTemplatesList id={Number(match.params.id)} />
-              )}
+            </Route>
-            />
             {project?.scm_type && project.scm_type !== '' && (
-              <Route
+              <Route path="/projects/:id/schedules">
-                path="/projects/:id/schedules"
-                render={() => (
                 <Schedules
                   setBreadcrumb={setBreadcrumb}
                   unifiedJobTemplate={project}
@@ -243,14 +227,10 @@ class Project extends Component {
                   loadSchedules={this.loadSchedules}
                   loadScheduleOptions={this.loadScheduleOptions}
                 />
+              </Route>
             )}
-              />
+            <Route key="not-found" path="*">
-            )}
+              {!hasContentLoading && (
-            <Route
-              key="not-found"
-              path="*"
-              render={() =>
-                !hasContentLoading && (
                 <ContentError isNotFound>
                   {match.params.id && (
                     <Link to={`/projects/${match.params.id}/details`}>
@@ -258,9 +238,8 @@ class Project extends Component {
                     </Link>
                   )}
                 </ContentError>
-                )
+              )}
-              }
+            </Route>
-            />
             ,
           </Switch>
         </Card>

awx/ui_next/src/screens/Project/Projects.jsx

@@ -62,10 +62,10 @@ class Projects extends Component {
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route path={`${match.path}/add`} render={() => <ProjectAdd />} />
+          <Route path={`${match.path}/add`}>
-          <Route
+            <ProjectAdd />
-            path={`${match.path}/:id`}
+          </Route>
-            render={() => (
+          <Route path={`${match.path}/:id`}>
             <Config>
               {({ me }) => (
                 <Project
@@ -76,9 +76,10 @@ class Projects extends Component {
                 />
               )}
             </Config>
-            )}
+          </Route>
-          />
+          <Route path={`${match.path}`}>
-          <Route path={`${match.path}`} render={() => <ProjectsList />} />
+            <ProjectsList />
+          </Route>
         </Switch>
       </Fragment>
     );

awx/ui_next/src/screens/Team/Team.jsx

@@ -87,28 +87,22 @@ function Team({ i18n, setBreadcrumb }) {
             </Route>
           )}
           {team && (
-            <Route
+            <Route path="/teams/:id/edit">
-              path="/teams/:id/edit"
+              <TeamEdit team={team} />
-              render={() => <TeamEdit team={team} />}
+            </Route>
-            />
           )}
           {team && (
-            <Route
+            <Route path="/teams/:id/users">
-              path="/teams/:id/users"
+              <span>Coming soon :)</span>
-              render={() => <span>Coming soon :)</span>}
+            </Route>
-            />
           )}
           {team && (
-            <Route
+            <Route path="/teams/:id/access">
-              path="/teams/:id/access"
+              <span>Coming soon :)</span>
-              render={() => <span>Coming soon :)</span>}
+            </Route>
-            />
           )}
-          <Route
+          <Route key="not-found" path="*">
-            key="not-found"
+            {!hasContentLoading && (
-            path="*"
-            render={() =>
-              !hasContentLoading && (
               <ContentError isNotFound>
                 {id && (
                   <Link to={`/teams/${id}/details`}>
@@ -116,9 +110,8 @@ function Team({ i18n, setBreadcrumb }) {
                   </Link>
                 )}
               </ContentError>
-              )
+            )}
-            }
+          </Route>
-          />
         </Switch>
       </Card>
     </PageSection>

awx/ui_next/src/screens/Template/Templates.jsx

@@ -80,14 +80,12 @@ class Templates extends Component {
       <>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route
+          <Route path={`${match.path}/job_template/add`}>
-            path={`${match.path}/job_template/add`}
+            <JobTemplateAdd />
-            render={() => <JobTemplateAdd />}
+          </Route>
-          />
+          <Route path={`${match.path}/workflow_job_template/add`}>
-          <Route
+            <WorkflowJobTemplateAdd />
-            path={`${match.path}/workflow_job_template/add`}
+          </Route>
-            render={() => <WorkflowJobTemplateAdd />}
-          />
           <Route
             path={`${match.path}/job_template/:id`}
             render={({ match: newRouteMatch }) => (
@@ -119,7 +117,9 @@ class Templates extends Component {
               </Config>
             )}
           />
-          <Route path={`${match.path}`} render={() => <TemplateList />} />
+          <Route path={`${match.path}`}>
+            <TemplateList />
+          </Route>
         </Switch>
       </>
     );

awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx

@@ -210,61 +210,52 @@ class WorkflowJobTemplate extends Component {
               <Route
                 key="wfjt-details"
                 path="/templates/workflow_job_template/:id/details"
-                render={() => (
+              >
                 <WorkflowJobTemplateDetail
                   template={template}
                   webhook_key={webhook_key}
                 />
-                )}
+              </Route>
-              />
             )}
             {template && (
-              <Route
+              <Route path="/templates/workflow_job_template/:id/access">
-                path="/templates/workflow_job_template/:id/access"
-                render={() => (
                 <ResourceAccessList
                   resource={template}
                   apiModel={WorkflowJobTemplatesAPI}
                 />
-                )}
+              </Route>
-              />
             )}
             {canSeeNotificationsTab && (
-              <Route
+              <Route path="/templates/workflow_job_template/:id/notifications">
-                path="/templates/workflow_job_template/:id/notifications"
-                render={() => (
                 <NotificationList
                   id={Number(match.params.id)}
                   canToggleNotifications={canToggleNotifications}
                   apiModel={WorkflowJobTemplatesAPI}
                 />
-                )}
+              </Route>
-              />
             )}
             {template && (
               <Route
                 key="wfjt-edit"
                 path="/templates/workflow_job_template/:id/edit"
-                render={() => (
+              >
                 <WorkflowJobTemplateEdit
                   template={template}
                   webhook_key={webhook_key}
                 />
-                )}
+              </Route>
-              />
             )}
             {template && (
               <Route
                 key="wfjt-visualizer"
                 path="/templates/workflow_job_template/:id/visualizer"
-                render={() => (
+              >
                 <AppendBody>
                   <FullPage>
                     <Visualizer template={template} />
                   </FullPage>
                 </AppendBody>
-                )}
+              </Route>
-              />
             )}
             {template?.id && (
               <Route path="/templates/workflow_job_template/:id/completed_jobs">
@@ -276,9 +267,7 @@ class WorkflowJobTemplate extends Component {
               </Route>
             )}
             {template?.id && (
-              <Route
+              <Route path="/templates/workflow_job_template/:id/schedules">
-                path="/templates/workflow_job_template/:id/schedules"
-                render={() => (
                 <Schedules
                   setBreadcrumb={setBreadcrumb}
                   unifiedJobTemplate={template}
@@ -286,18 +275,14 @@ class WorkflowJobTemplate extends Component {
                   loadSchedules={this.loadSchedules}
                   loadScheduleOptions={this.loadScheduleOptions}
                 />
-                )}
+              </Route>
-              />
             )}
             {template && (
               <Route path="/templates/:templateType/:id/survey">
                 <TemplateSurvey template={template} />
               </Route>
             )}
-            <Route
+            <Route key="not-found" path="*">
-              key="not-found"
-              path="*"
-              render={() => (
               <ContentError isNotFound>
                 {match.params.id && (
                   <Link
@@ -307,8 +292,7 @@ class WorkflowJobTemplate extends Component {
                   </Link>
                 )}
               </ContentError>
-              )}
+            </Route>
-            />
           </Switch>
         </Card>
       </PageSection>

awx/ui_next/src/screens/User/User.jsx

@@ -119,43 +119,33 @@ class User extends Component {
           <Switch>
             <Redirect from="/users/:id" to="/users/:id/details" exact />
             {user && (
-              <Route
+              <Route path="/users/:id/edit">
-                path="/users/:id/edit"
+                <UserEdit user={user} />
-                render={() => <UserEdit user={user} />}
+              </Route>
-              />
             )}
             {user && (
-              <Route
+              <Route path="/users/:id/details">
-                path="/users/:id/details"
+                <UserDetail user={user} />
-                render={() => <UserDetail user={user} />}
+              </Route>
-              />
             )}
             <Route path="/users/:id/organizations">
               <UserOrganizations id={Number(match.params.id)} />
             </Route>
-            <Route
+            <Route path="/users/:id/teams">
-              path="/users/:id/teams"
+              <UserTeams id={Number(match.params.id)} />
-              render={() => <UserTeams id={Number(match.params.id)} />}
+            </Route>
-            />
             {user && (
-              <Route
+              <Route path="/users/:id/access">
-                path="/users/:id/access"
-                render={() => (
                 <span>
-                    this needs a different access list from regular resources
+                  this needs a different access list from regular resources like
-                    like proj, inv, jt
+                  proj, inv, jt
                 </span>
+              </Route>
             )}
-              />
+            <Route path="/users/:id/tokens">
-            )}
+              <UserTokens id={Number(match.params.id)} />
-            <Route
+            </Route>
-              path="/users/:id/tokens"
+            <Route key="not-found" path="*">
-              render={() => <UserTokens id={Number(match.params.id)} />}
-            />
-            <Route
-              key="not-found"
-              path="*"
-              render={() =>
               !hasContentLoading && (
               <ContentError isNotFound>
                 {match.params.id && (
@@ -165,8 +155,7 @@ class User extends Component {
                 )}
               </ContentError>
               )
-              }
+            </Route>
-            />
             ,
           </Switch>
         </Card>

awx/ui_next/src/screens/User/Users.jsx

@@ -54,10 +54,10 @@ class Users extends Component {
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route path={`${match.path}/add`} render={() => <UserAdd />} />
+          <Route path={`${match.path}/add`}>
-          <Route
+            <UserAdd />
-            path={`${match.path}/:id`}
+          </Route>
-            render={() => (
+          <Route path={`${match.path}/:id`}>
             <Config>
               {({ me }) => (
                 <User
@@ -68,9 +68,10 @@ class Users extends Component {
                 />
               )}
             </Config>
-            )}
+          </Route>
-          />
+          <Route path={`${match.path}`}>
-          <Route path={`${match.path}`} render={() => <UsersList />} />
+            <UsersList />
+          </Route>
         </Switch>
       </Fragment>
     );