diff --git a/public/app/features/trails/DataTrailsApp.tsx b/public/app/features/trails/DataTrailsApp.tsx
index a3b7c8ec46a..a3057fa4b66 100644
--- a/public/app/features/trails/DataTrailsApp.tsx
+++ b/public/app/features/trails/DataTrailsApp.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom-v5-compat';
 
 import { PageLayoutType } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
@@ -32,11 +32,11 @@ export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> {
     const { trail, home } = model.useState();
 
     return (
-      <Switch>
+      <Routes>
+        {/* The routes are relative to the HOME_ROUTE */}
         <Route
-          exact={true}
-          path={HOME_ROUTE}
-          render={() => (
+          path={'/'}
+          element={
             <Page
               navId="explore/metrics"
               layout={PageLayoutType.Standard}
@@ -45,10 +45,10 @@ export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> {
             >
               <home.Component model={home} />
             </Page>
-          )}
+          }
         />
-        <Route exact={true} path={TRAILS_ROUTE} render={() => <DataTrailView trail={trail} />} />
-      </Switch>
+        <Route path={TRAILS_ROUTE.replace(HOME_ROUTE, '')} element={<DataTrailView trail={trail} />} />
+      </Routes>
     );
   };
 }