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
-          key="not-found"
-          path="*"
-          render={() => {
-            return (
-              <ContentError>
-                {unifiedJobTemplate && (
-                  <Link to={`${pathRoot}details`}>
-                    {i18n._(t`View Details`)}
-                  </Link>
-                )}
-              </ContentError>
-            );
-          }}
-        />
+        <Route key="not-found" path="*">
+          <ContentError>
+            {unifiedJobTemplate && (
+              <Link to={`${pathRoot}details`}>{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
-        path={`${match.path}/add`}
-        render={() => <ScheduleAdd createSchedule={createSchedule} />}
-      />
-      <Route
-        key="details"
-        path={`${match.path}/:scheduleId`}
-        render={() => (
-          <Schedule
-            unifiedJobTemplate={unifiedJobTemplate}
-            setBreadcrumb={setBreadcrumb}
-          />
-        )}
-      />
-      <Route
-        key="list"
-        path={`${match.path}`}
-        render={() => {
-          return (
-            <ScheduleList
-              loadSchedules={loadSchedules}
-              loadScheduleOptions={loadScheduleOptions}
-            />
-          );
-        }}
-      />
+      <Route path={`${match.path}/add`}>
+        <ScheduleAdd createSchedule={createSchedule} />
+      </Route>
+      <Route key="details" path={`${match.path}/:scheduleId`}>
+        <Schedule
+          unifiedJobTemplate={unifiedJobTemplate}
+          setBreadcrumb={setBreadcrumb}
+        />
+      </Route>
+      <Route key="list" path={`${match.path}`}>
+        <ScheduleList
+          loadSchedules={loadSchedules}
+          loadScheduleOptions={loadScheduleOptions}
+        />
+      </Route>
     </Switch>
   );
 }

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

@@ -98,59 +98,43 @@ function Credential({ i18n, setBreadcrumb }) {
             exact
           />
           {credential && [
-            <Route
-              key="details"
-              path="/credentials/:id/details"
-              render={() => <CredentialDetail credential={credential} />}
-            />,
-            <Route
-              key="edit"
-              path="/credentials/:id/edit"
-              render={() => <CredentialEdit credential={credential} />}
-            />,
+            <Route key="details" path="/credentials/:id/details">
+              <CredentialDetail credential={credential} />
+            </Route>,
+            <Route key="edit" path="/credentials/:id/edit">
+              <CredentialEdit credential={credential} />
+            </Route>,
             credential.organization && (
-              <Route
-                key="access"
-                path="/credentials/:id/access"
-                render={() => (
-                  <ResourceAccessList
-                    resource={credential}
-                    apiModel={CredentialsAPI}
-                  />
-                )}
-              />
+              <Route key="access" path="/credentials/:id/access">
+                <ResourceAccessList
+                  resource={credential}
+                  apiModel={CredentialsAPI}
+                />
+              </Route>
             ),
-            <Route
-              key="not-found"
-              path="*"
-              render={() =>
-                !hasContentLoading && (
-                  <ContentError isNotFound>
-                    {match.params.id && (
-                      <Link to={`/credentials/${match.params.id}/details`}>
-                        {i18n._(`View Credential Details`)}
-                      </Link>
-                    )}
-                  </ContentError>
-                )
-              }
-            />,
-          ]}
-          <Route
-            key="not-found"
-            path="*"
-            render={() =>
-              !hasContentLoading && (
+            <Route key="not-found" path="*">
+              {!hasContentLoading && (
                 <ContentError isNotFound>
-                  {id && (
-                    <Link to={`/credentials/${id}/details`}>
+                  {match.params.id && (
+                    <Link to={`/credentials/${match.params.id}/details`}>
                       {i18n._(`View Credential Details`)}
                     </Link>
                   )}
                 </ContentError>
-              )
-            }
-          />
+              )}
+            </Route>,
+          ]}
+          <Route key="not-found" path="*">
+            {!hasContentLoading && (
+              <ContentError isNotFound>
+                {id && (
+                  <Link to={`/credentials/${id}/details`}>
+                    {i18n._(`View Credential Details`)}
+                  </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
-        key="list"
-        path="/hosts/:id/groups"
-        render={() => {
-          return <HostGroupsList host={host} />;
-        }}
-      />
+      <Route key="list" path="/hosts/:id/groups">
+        <HostGroupsList host={host} />
+      </Route>
     </Switch>
   );
 }

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

@@ -85,14 +85,12 @@ class Inventories extends Component {
       <>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route
-            path={`${match.path}/inventory/add`}
-            render={() => <InventoryAdd />}
-          />
-          <Route
-            path={`${match.path}/smart_inventory/add`}
-            render={() => <SmartInventoryAdd />}
-          />
+          <Route path={`${match.path}/inventory/add`}>
+            <InventoryAdd />
+          </Route>
+          <Route path={`${match.path}/smart_inventory/add`}>
+            <SmartInventoryAdd />
+          </Route>
           <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,21 +137,15 @@ function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
             <InventoryGroupHosts inventoryGroup={inventoryGroup} />
           </Route>,
         ]}
-        <Route
-          key="not-found"
-          path="*"
-          render={() => {
-            return (
-              <ContentError>
-                {inventory && (
-                  <Link to={`/inventories/inventory/${inventory.id}/details`}>
-                    {i18n._(t`View Inventory Details`)}
-                  </Link>
-                )}
-              </ContentError>
-            );
-          }}
-        />
+        <Route key="not-found" path="*">
+          <ContentError>
+            {inventory && (
+              <Link to={`/inventories/inventory/${inventory.id}/details`}>
+                {i18n._(t`View Inventory Details`)}
+              </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
-        key="add"
-        path="/inventories/inventory/:id/groups/add"
-        render={() => {
-          return (
-            <InventoryGroupAdd
-              setBreadcrumb={setBreadcrumb}
-              inventory={inventory}
-            />
-          );
-        }}
-      />
-      <Route
-        key="details"
-        path="/inventories/inventory/:id/groups/:groupId/"
-        render={() => (
-          <InventoryGroup inventory={inventory} setBreadcrumb={setBreadcrumb} />
-        )}
-      />
-      <Route
-        key="list"
-        path="/inventories/inventory/:id/groups"
-        render={() => {
-          return <InventoryGroupsList />;
-        }}
-      />
+      <Route key="add" path="/inventories/inventory/:id/groups/add">
+        <InventoryGroupAdd
+          setBreadcrumb={setBreadcrumb}
+          inventory={inventory}
+        />
+      </Route>
+      <Route key="details" path="/inventories/inventory/:id/groups/:groupId/">
+        <InventoryGroup inventory={inventory} setBreadcrumb={setBreadcrumb} />
+      </Route>
+      <Route key="list" path="/inventories/inventory/:id/groups">
+        <InventoryGroupsList />
+      </Route>
     </Switch>
   );
 }

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

@@ -8,13 +8,9 @@ import InventoryHostGroupsList from './InventoryHostGroupsList';
 function InventoryHostGroups() {
   return (
     <Switch>
-      <Route
-        key="list"
-        path="/inventories/inventory/:id/hosts/:hostId/groups"
-        render={() => {
-          return <InventoryHostGroupsList />;
-        }}
-      />
+      <Route key="list" path="/inventories/inventory/:id/hosts/:hostId/groups">
+        <InventoryHostGroupsList />
+      </Route>
     </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
-                key="edit"
-                path="/inventories/smart_inventory/:id/edit"
-                render={() => <SmartInventoryEdit inventory={inventory} />}
-              />,
+              >
+                <SmartInventoryDetail
+                  hasSmartInventoryLoading={hasContentLoading}
+                  inventory={inventory}
+                />
+              </Route>,
+              <Route key="edit" path="/inventories/smart_inventory/:id/edit">
+                <SmartInventoryEdit inventory={inventory} />
+              </Route>,
               <Route
                 key="access"
                 path="/inventories/smart_inventory/:id/access"
-                render={() => (
-                  <ResourceAccessList
-                    resource={inventory}
-                    apiModel={InventoriesAPI}
-                  />
-                )}
-              />,
-              <Route
-                key="hosts"
-                path="/inventories/smart_inventory/:id/hosts"
-                render={() => <SmartInventoryHosts inventory={inventory} />}
-              />,
+              >
+                <ResourceAccessList
+                  resource={inventory}
+                  apiModel={InventoriesAPI}
+                />
+              </Route>,
+              <Route key="hosts" path="/inventories/smart_inventory/:id/hosts">
+                <SmartInventoryHosts inventory={inventory} />
+              </Route>,
               <Route
                 key="completed_jobs"
                 path="/inventories/smart_inventory/:id/completed_jobs"
@@ -160,23 +154,19 @@ class SmartInventory extends Component {
                   }}
                 />
               </Route>,
-              <Route
-                key="not-found"
-                path="*"
-                render={() =>
-                  !hasContentLoading && (
-                    <ContentError isNotFound>
-                      {match.params.id && (
-                        <Link
-                          to={`/inventories/smart_inventory/${match.params.id}/details`}
-                        >
-                          {i18n._(`View Inventory Details`)}
-                        </Link>
-                      )}
-                    </ContentError>
-                  )
-                }
-              />,
+              <Route key="not-found" path="*">
+                {!hasContentLoading && (
+                  <ContentError isNotFound>
+                    {match.params.id && (
+                      <Link
+                        to={`/inventories/smart_inventory/${match.params.id}/details`}
+                      >
+                        {i18n._(`View Inventory Details`)}
+                      </Link>
+                    )}
+                  </ContentError>
+                )}
+              </Route>,
             ]}
           </Switch>
         </Card>

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

@@ -124,53 +124,34 @@ class Job extends Component {
               to="/jobs/:type/:id/output"
               exact
             />
-            <Route
-              key="workflow-details"
-              path="/jobs/workflow/:id/details"
-              render={() =>
-                job &&
-                job.type === 'workflow_job' && <WorkflowDetail job={job} />
-              }
-            />
-            <Route
-              key="workflow-output"
-              path="/jobs/workflow/:id/output"
-              render={() =>
-                job &&
-                job.type === 'workflow_job' && <WorkflowOutput job={job} />
-              }
-            />
+            {job &&
+              job.type === 'workflow_job' && [
+                <Route key="workflow-details" path="/jobs/workflow/:id/details">
+                  <WorkflowDetail job={job} />
+                </Route>,
+                <Route key="workflow-output" path="/jobs/workflow/:id/output">
+                  <WorkflowOutput job={job} />
+                </Route>,
+              ]}
             {job &&
               job.type !== 'workflow_job' && [
-                <Route
-                  key="details"
-                  path="/jobs/:type/:id/details"
-                  render={() => (
-                    <JobDetail type={match.params.type} job={job} />
+                <Route key="details" path="/jobs/:type/:id/details">
+                  <JobDetail type={match.params.type} job={job} />
+                </Route>,
+                <Route key="output" path="/jobs/:type/:id/output">
+                  <JobOutput type={match.params.type} job={job} />
+                </Route>,
+                <Route key="not-found" path="*">
+                  {!hasContentLoading && (
+                    <ContentError isNotFound>
+                      <Link
+                        to={`/jobs/${match.params.type}/${match.params.id}/details`}
+                      >
+                        {i18n._(`View Job Details`)}
+                      </Link>
+                    </ContentError>
                   )}
-                />,
-                <Route
-                  key="output"
-                  path="/jobs/:type/:id/output"
-                  render={() => (
-                    <JobOutput type={match.params.type} job={job} />
-                  )}
-                />,
-                <Route
-                  key="not-found"
-                  path="*"
-                  render={() =>
-                    !hasContentLoading && (
-                      <ContentError isNotFound>
-                        <Link
-                          to={`/jobs/${match.params.type}/${match.params.id}/details`}
-                        >
-                          {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
-          path={`${match.path}/:id/details`}
-          render={({ match: m }) => (
-            <JobTypeRedirect id={m.params.id} path={m.path} view="details" />
-          )}
-        />
-        <Route
-          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
-          path={`${match.path}/:id`}
-          render={({ match: m }) => (
-            <JobTypeRedirect id={m.params.id} path={m.path} />
-          )}
-        />
+        <Route path={`${match.path}/:id/details`}>
+          <JobTypeRedirect id={id} path={match.path} view="details" />
+        </Route>
+        <Route path={`${match.path}/:id/output`}>
+          <JobTypeRedirect id={id} path={match.path} view="output" />
+        </Route>
+        <Route path={`${match.path}/:type/:id`}>
+          <Job
+            history={history}
+            location={location}
+            setBreadcrumb={buildBreadcrumbConfig}
+          />
+        </Route>
+        <Route path={`${match.path}/:id`}>
+          <JobTypeRedirect id={id} path={match.path} />
+        </Route>
       </Switch>
     </>
   );

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

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

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

@@ -55,26 +55,24 @@ class Organizations extends Component {
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route
-            path={`${match.path}/add`}
-            render={() => <OrganizationAdd />}
-          />
-          <Route
-            path={`${match.path}/:id`}
-            render={() => (
-              <Config>
-                {({ me }) => (
-                  <Organization
-                    history={history}
-                    location={location}
-                    setBreadcrumb={this.setBreadcrumbConfig}
-                    me={me || {}}
-                  />
-                )}
-              </Config>
-            )}
-          />
-          <Route path={`${match.path}`} render={() => <OrganizationsList />} />
+          <Route path={`${match.path}/add`}>
+            <OrganizationAdd />
+          </Route>
+          <Route path={`${match.path}/:id`}>
+            <Config>
+              {({ me }) => (
+                <Organization
+                  history={history}
+                  location={location}
+                  setBreadcrumb={this.setBreadcrumbConfig}
+                  me={me || {}}
+                />
+              )}
+            </Config>
+          </Route>
+          <Route path={`${match.path}`}>
+            <OrganizationsList />
+          </Route>
         </Switch>
       </Fragment>
     );

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

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

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

@@ -62,23 +62,24 @@ class Projects extends Component {
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route path={`${match.path}/add`} render={() => <ProjectAdd />} />
-          <Route
-            path={`${match.path}/:id`}
-            render={() => (
-              <Config>
-                {({ me }) => (
-                  <Project
-                    history={history}
-                    location={location}
-                    setBreadcrumb={this.setBreadcrumbConfig}
-                    me={me || {}}
-                  />
-                )}
-              </Config>
-            )}
-          />
-          <Route path={`${match.path}`} render={() => <ProjectsList />} />
+          <Route path={`${match.path}/add`}>
+            <ProjectAdd />
+          </Route>
+          <Route path={`${match.path}/:id`}>
+            <Config>
+              {({ me }) => (
+                <Project
+                  history={history}
+                  location={location}
+                  setBreadcrumb={this.setBreadcrumbConfig}
+                  me={me || {}}
+                />
+              )}
+            </Config>
+          </Route>
+          <Route path={`${match.path}`}>
+            <ProjectsList />
+          </Route>
         </Switch>
       </Fragment>
     );

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

@@ -87,38 +87,31 @@ function Team({ i18n, setBreadcrumb }) {
             </Route>
           )}
           {team && (
-            <Route
-              path="/teams/:id/edit"
-              render={() => <TeamEdit team={team} />}
-            />
+            <Route path="/teams/:id/edit">
+              <TeamEdit team={team} />
+            </Route>
           )}
           {team && (
-            <Route
-              path="/teams/:id/users"
-              render={() => <span>Coming soon :)</span>}
-            />
+            <Route path="/teams/:id/users">
+              <span>Coming soon :)</span>
+            </Route>
           )}
           {team && (
-            <Route
-              path="/teams/:id/access"
-              render={() => <span>Coming soon :)</span>}
-            />
+            <Route path="/teams/:id/access">
+              <span>Coming soon :)</span>
+            </Route>
           )}
-          <Route
-            key="not-found"
-            path="*"
-            render={() =>
-              !hasContentLoading && (
-                <ContentError isNotFound>
-                  {id && (
-                    <Link to={`/teams/${id}/details`}>
-                      {i18n._(`View Team Details`)}
-                    </Link>
-                  )}
-                </ContentError>
-              )
-            }
-          />
+          <Route key="not-found" path="*">
+            {!hasContentLoading && (
+              <ContentError isNotFound>
+                {id && (
+                  <Link to={`/teams/${id}/details`}>
+                    {i18n._(`View Team Details`)}
+                  </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
-            path={`${match.path}/job_template/add`}
-            render={() => <JobTemplateAdd />}
-          />
-          <Route
-            path={`${match.path}/workflow_job_template/add`}
-            render={() => <WorkflowJobTemplateAdd />}
-          />
+          <Route path={`${match.path}/job_template/add`}>
+            <JobTemplateAdd />
+          </Route>
+          <Route path={`${match.path}/workflow_job_template/add`}>
+            <WorkflowJobTemplateAdd />
+          </Route>
           <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}
-                  />
-                )}
-              />
+              >
+                <WorkflowJobTemplateDetail
+                  template={template}
+                  webhook_key={webhook_key}
+                />
+              </Route>
             )}
             {template && (
-              <Route
-                path="/templates/workflow_job_template/:id/access"
-                render={() => (
-                  <ResourceAccessList
-                    resource={template}
-                    apiModel={WorkflowJobTemplatesAPI}
-                  />
-                )}
-              />
+              <Route path="/templates/workflow_job_template/:id/access">
+                <ResourceAccessList
+                  resource={template}
+                  apiModel={WorkflowJobTemplatesAPI}
+                />
+              </Route>
             )}
             {canSeeNotificationsTab && (
-              <Route
-                path="/templates/workflow_job_template/:id/notifications"
-                render={() => (
-                  <NotificationList
-                    id={Number(match.params.id)}
-                    canToggleNotifications={canToggleNotifications}
-                    apiModel={WorkflowJobTemplatesAPI}
-                  />
-                )}
-              />
+              <Route path="/templates/workflow_job_template/:id/notifications">
+                <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}
-                  />
-                )}
-              />
+              >
+                <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>
-                )}
-              />
+              >
+                <AppendBody>
+                  <FullPage>
+                    <Visualizer template={template} />
+                  </FullPage>
+                </AppendBody>
+              </Route>
             )}
             {template?.id && (
               <Route path="/templates/workflow_job_template/:id/completed_jobs">
@@ -276,39 +267,32 @@ class WorkflowJobTemplate extends Component {
               </Route>
             )}
             {template?.id && (
-              <Route
-                path="/templates/workflow_job_template/:id/schedules"
-                render={() => (
-                  <Schedules
-                    setBreadcrumb={setBreadcrumb}
-                    unifiedJobTemplate={template}
-                    createSchedule={this.createSchedule}
-                    loadSchedules={this.loadSchedules}
-                    loadScheduleOptions={this.loadScheduleOptions}
-                  />
-                )}
-              />
+              <Route path="/templates/workflow_job_template/:id/schedules">
+                <Schedules
+                  setBreadcrumb={setBreadcrumb}
+                  unifiedJobTemplate={template}
+                  createSchedule={this.createSchedule}
+                  loadSchedules={this.loadSchedules}
+                  loadScheduleOptions={this.loadScheduleOptions}
+                />
+              </Route>
             )}
             {template && (
               <Route path="/templates/:templateType/:id/survey">
                 <TemplateSurvey template={template} />
               </Route>
             )}
-            <Route
-              key="not-found"
-              path="*"
-              render={() => (
-                <ContentError isNotFound>
-                  {match.params.id && (
-                    <Link
-                      to={`/templates/workflow_job_template/${match.params.id}/details`}
-                    >
-                      {i18n._(`View Template Details`)}
-                    </Link>
-                  )}
-                </ContentError>
-              )}
-            />
+            <Route key="not-found" path="*">
+              <ContentError isNotFound>
+                {match.params.id && (
+                  <Link
+                    to={`/templates/workflow_job_template/${match.params.id}/details`}
+                  >
+                    {i18n._(`View Template Details`)}
+                  </Link>
+                )}
+              </ContentError>
+            </Route>
           </Switch>
         </Card>
       </PageSection>

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

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

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

@@ -54,23 +54,24 @@ class Users extends Component {
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route path={`${match.path}/add`} render={() => <UserAdd />} />
-          <Route
-            path={`${match.path}/:id`}
-            render={() => (
-              <Config>
-                {({ me }) => (
-                  <User
-                    history={history}
-                    location={location}
-                    setBreadcrumb={this.setBreadcrumbConfig}
-                    me={me || {}}
-                  />
-                )}
-              </Config>
-            )}
-          />
-          <Route path={`${match.path}`} render={() => <UsersList />} />
+          <Route path={`${match.path}/add`}>
+            <UserAdd />
+          </Route>
+          <Route path={`${match.path}/:id`}>
+            <Config>
+              {({ me }) => (
+                <User
+                  history={history}
+                  location={location}
+                  setBreadcrumb={this.setBreadcrumbConfig}
+                  me={me || {}}
+                />
+              )}
+            </Config>
+          </Route>
+          <Route path={`${match.path}`}>
+            <UsersList />
+          </Route>
         </Switch>
       </Fragment>
     );