diff --git a/ui/app/controllers/clients/client/index.js b/ui/app/controllers/clients/client/index.js
index 3840f5b5fefa..66c39be9dc65 100644
--- a/ui/app/controllers/clients/client/index.js
+++ b/ui/app/controllers/clients/client/index.js
@@ -205,7 +205,7 @@ export default class ClientController extends Controller.extend(
 
   @action
   gotoAllocation(allocation) {
-    this.transitionToRoute('allocations.allocation', allocation);
+    this.transitionToRoute('allocations.allocation', allocation.id);
   }
 
   @action
diff --git a/ui/app/controllers/csi/plugins/plugin/allocations.js b/ui/app/controllers/csi/plugins/plugin/allocations.js
index 9b964ef34bfe..7cd3ed6e20e0 100644
--- a/ui/app/controllers/csi/plugins/plugin/allocations.js
+++ b/ui/app/controllers/csi/plugins/plugin/allocations.js
@@ -113,7 +113,7 @@ export default class AllocationsController extends Controller.extend(
   @action
   gotoAllocation(allocation, event) {
     lazyClick([
-      () => this.transitionToRoute('allocations.allocation', allocation),
+      () => this.transitionToRoute('allocations.allocation', allocation.id),
       event,
     ]);
   }
diff --git a/ui/app/controllers/csi/plugins/plugin/index.js b/ui/app/controllers/csi/plugins/plugin/index.js
index c833f103d26e..f30735b900a6 100644
--- a/ui/app/controllers/csi/plugins/plugin/index.js
+++ b/ui/app/controllers/csi/plugins/plugin/index.js
@@ -19,6 +19,6 @@ export default class IndexController extends Controller {
 
   @action
   gotoAllocation(allocation) {
-    this.transitionToRoute('allocations.allocation', allocation);
+    this.transitionToRoute('allocations.allocation', allocation.id);
   }
 }
diff --git a/ui/app/controllers/csi/volumes/volume.js b/ui/app/controllers/csi/volumes/volume.js
index 936a486c5c6b..a47440c6937c 100644
--- a/ui/app/controllers/csi/volumes/volume.js
+++ b/ui/app/controllers/csi/volumes/volume.js
@@ -60,6 +60,6 @@ export default class VolumeController extends Controller {
 
   @action
   gotoAllocation(allocation) {
-    this.transitionToRoute('allocations.allocation', allocation);
+    this.transitionToRoute('allocations.allocation', allocation.id);
   }
 }
diff --git a/ui/app/controllers/jobs/job/allocations.js b/ui/app/controllers/jobs/job/allocations.js
index 26b1f9a4d118..254f28a363b5 100644
--- a/ui/app/controllers/jobs/job/allocations.js
+++ b/ui/app/controllers/jobs/job/allocations.js
@@ -166,7 +166,7 @@ export default class AllocationsController extends Controller.extend(
 
   @action
   gotoAllocation(allocation) {
-    this.transitionToRoute('allocations.allocation', allocation);
+    this.transitionToRoute('allocations.allocation', allocation.id);
   }
 
   get optionsAllocationStatus() {
diff --git a/ui/app/controllers/jobs/job/task-group.js b/ui/app/controllers/jobs/job/task-group.js
index f44ac852af18..99e16d5fd79c 100644
--- a/ui/app/controllers/jobs/job/task-group.js
+++ b/ui/app/controllers/jobs/job/task-group.js
@@ -140,7 +140,7 @@ export default class TaskGroupController extends Controller.extend(
 
   @action
   gotoAllocation(allocation) {
-    this.transitionToRoute('allocations.allocation', allocation);
+    this.transitionToRoute('allocations.allocation', allocation.id);
   }
 
   @action
diff --git a/ui/app/routes/allocations/allocation.js b/ui/app/routes/allocations/allocation.js
index fd863ba3ad73..da9784eb77a0 100644
--- a/ui/app/routes/allocations/allocation.js
+++ b/ui/app/routes/allocations/allocation.js
@@ -50,6 +50,9 @@ export default class AllocationRoute extends Route.extend(WithWatchers) {
         super.model(...arguments),
         this.store.findAll('namespace'),
       ]);
+      if (allocation.isPartial) {
+        await allocation.reload();
+      }
       const jobId = allocation.belongsTo('job').id();
       await this.store.findRecord('job', jobId);
       return allocation;
diff --git a/ui/tests/acceptance/job-allocations-test.js b/ui/tests/acceptance/job-allocations-test.js
index 837cb692cb1f..ddb791264628 100644
--- a/ui/tests/acceptance/job-allocations-test.js
+++ b/ui/tests/acceptance/job-allocations-test.js
@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable qunit/require-expect */
-import { currentURL } from '@ember/test-helpers';
+import { currentURL, click, find } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
@@ -77,6 +77,33 @@ module('Acceptance | job allocations', function (hooks) {
     assert.equal(document.title, `Job ${job.name} allocations - Nomad`);
   });
 
+  test('clicking an allocation results in the correct endpoint being hit', async function (assert) {
+    server.createList('allocation', Allocations.pageSize - 1, {
+      shallow: true,
+    });
+    allocations = server.schema.allocations.where({ jobId: job.id }).models;
+
+    await Allocations.visit({ id: job.id });
+
+    const firstAllocation = find('[data-test-allocation]');
+    await click(firstAllocation);
+
+    const requestToAllocationEndpoint = server.pretender.handledRequests.find(
+      (request) =>
+        request.url.includes(
+          `/v1/allocation/${firstAllocation.dataset.testAllocation}`
+        )
+    );
+
+    assert.ok(requestToAllocationEndpoint, 'the correct endpoint is hit');
+
+    assert.equal(
+      currentURL(),
+      `/allocations/${firstAllocation.dataset.testAllocation}`,
+      'the URL is correct'
+    );
+  });
+
   test('allocations table is sortable', async function (assert) {
     server.createList('allocation', Allocations.pageSize - 1);
     allocations = server.schema.allocations.where({ jobId: job.id }).models;