diff --git a/ui/helpers/constants/routes.js b/ui/helpers/constants/routes.js
index 7fe043e3f..83d659dbf 100644
--- a/ui/helpers/constants/routes.js
+++ b/ui/helpers/constants/routes.js
@@ -125,7 +125,7 @@ const PATH_NAME_MAP = {
   [IMPORT_ACCOUNT_ROUTE]: 'Import Account Page',
   [CONNECT_HARDWARE_ROUTE]: 'Connect Hardware Wallet Page',
   [SEND_ROUTE]: 'Send Page',
-  [TOKEN_DETAILS]: 'Token Details Page',
+  [`${TOKEN_DETAILS}/:address`]: 'Token Details Page',
   [`${CONNECT_ROUTE}/:id`]: 'Connect To Site Confirmation Page',
   [`${CONNECT_ROUTE}/:id${CONNECT_CONFIRM_PERMISSIONS_ROUTE}`]: 'Grant Connected Site Permissions Confirmation Page',
   [CONNECTED_ROUTE]: 'Sites Connected To This Account Page',
diff --git a/ui/pages/asset/components/token-asset.js b/ui/pages/asset/components/token-asset.js
index 893d2606c..a719fb8b6 100644
--- a/ui/pages/asset/components/token-asset.js
+++ b/ui/pages/asset/components/token-asset.js
@@ -68,10 +68,7 @@ export default function TokenAsset({ token }) {
               dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
             }}
             onViewTokenDetails={() => {
-              history.push({
-                pathname: TOKEN_DETAILS,
-                state: { tokenAddress: token.address },
-              });
+              history.push(`${TOKEN_DETAILS}/${token.address}`);
             }}
             tokenSymbol={token.symbol}
           />
diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js
index 94c9b93f9..2ac1b40fa 100644
--- a/ui/pages/routes/routes.component.js
+++ b/ui/pages/routes/routes.component.js
@@ -155,7 +155,7 @@ export default class Routes extends Component {
           exact
         />
         <Authenticated
-          path={TOKEN_DETAILS}
+          path={`${TOKEN_DETAILS}/:address/`}
           component={TokenDetailsPage}
           exact
         />
diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js
index 522a7a5d4..a26ada620 100644
--- a/ui/pages/token-details/token-details-page.js
+++ b/ui/pages/token-details/token-details-page.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Redirect, useHistory } from 'react-router-dom';
+import { Redirect, useHistory, useParams } from 'react-router-dom';
 import { getTokens } from '../../ducks/metamask/metamask';
 import { getUseTokenDetection, getTokenList } from '../../selectors';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
@@ -34,7 +34,7 @@ export default function TokenDetailsPage() {
   const tokenList = useSelector(getTokenList);
   const useTokenDetection = useSelector(getUseTokenDetection);
 
-  const tokenAddress = history?.location?.state?.tokenAddress;
+  const { address: tokenAddress } = useParams();
   const tokenMetadata = Object.values(tokenList).find((token) =>
     isEqualCaseInsensitive(token.address, tokenAddress),
   );
diff --git a/ui/pages/token-details/token-details-page.test.js b/ui/pages/token-details/token-details-page.test.js
index 623430725..e5385098f 100644
--- a/ui/pages/token-details/token-details-page.test.js
+++ b/ui/pages/token-details/token-details-page.test.js
@@ -111,11 +111,9 @@ jest.mock('react-router-dom', () => {
     ...original,
     useHistory: () => ({
       push: jest.fn(),
-      location: {
-        state: {
-          tokenAddress: testTokenAddress,
-        },
-      },
+    }),
+    useParams: () => ({
+      address: testTokenAddress,
     }),
   };
 });