diff --git a/demos/intermediate/package-lock.json b/demos/intermediate/package-lock.json
index 5bec88c..1e5ce99 100644
--- a/demos/intermediate/package-lock.json
+++ b/demos/intermediate/package-lock.json
@@ -800,11 +800,18 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
-      "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
       "requires": {
-        "regenerator-runtime": "^0.13.2"
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        }
       }
     },
     "@babel/template": {
@@ -904,6 +911,12 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
+      "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
+      "dev": true
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -922,6 +935,50 @@
       "integrity": "sha512-LcsGbPomWsad6wmMNv7nBLw7YYYyfdYcz6xryKYQhx89c3XXan+8Q6AJ43G5XDIaklaVkK3mE4fCb0SBvMiPSQ==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "17.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.21.tgz",
+      "integrity": "sha512-GzzXCpOthOjXvrAUFQwU/svyxu658cwu00Q9ugujS4qc1zXgLFaO0kS2SLOaMWLt2Jik781yuHCWB7UcYdGAeQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-router": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz",
+      "integrity": "sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.9.tgz",
+      "integrity": "sha512-Go0vxZSigXTyXx8xPkGiBrrc3YbBs82KE14WENMLS6TSUKcRFSmYVbL19zFOnNFqJhqrPqEs2h5eUpJhSRrwZw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -2325,6 +2382,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csstype": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
+      "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==",
+      "dev": true
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -3591,11 +3654,6 @@
       "integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==",
       "dev": true
     },
-    "gud": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-    },
     "handle-thing": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@@ -3711,16 +3769,16 @@
       "dev": true
     },
     "history": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
-      "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
       "requires": {
         "@babel/runtime": "^7.1.2",
         "loose-envify": "^1.2.0",
-        "resolve-pathname": "^2.2.0",
+        "resolve-pathname": "^3.0.0",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0",
-        "value-equal": "^0.4.0"
+        "value-equal": "^1.0.1"
       }
     },
     "hmac-drbg": {
@@ -3735,9 +3793,9 @@
       }
     },
     "hoist-non-react-statics": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
-      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
       "requires": {
         "react-is": "^16.7.0"
       }
@@ -4649,13 +4707,12 @@
       "dev": true
     },
     "mini-create-react-context": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz",
-      "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
       "requires": {
-        "@babel/runtime": "^7.4.0",
-        "gud": "^1.0.0",
-        "tiny-warning": "^1.0.2"
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
       }
     },
     "minimalistic-assert": {
@@ -5276,9 +5333,9 @@
       "dev": true
     },
     "path-to-regexp": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
-      "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
       "requires": {
         "isarray": "0.0.1"
       }
@@ -5696,15 +5753,15 @@
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
     "react-router": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz",
-      "integrity": "sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.3.0",
+        "mini-create-react-context": "^0.4.0",
         "path-to-regexp": "^1.7.0",
         "prop-types": "^15.6.2",
         "react-is": "^16.6.0",
@@ -5713,15 +5770,15 @@
       }
     },
     "react-router-dom": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.1.tgz",
-      "integrity": "sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
+      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.0.1",
+        "react-router": "5.2.1",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       }
@@ -5794,7 +5851,8 @@
     "regenerator-runtime": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.0",
@@ -5980,9 +6038,9 @@
       "dev": true
     },
     "resolve-pathname": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
-      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
     },
     "resolve-url": {
       "version": "0.2.1",
@@ -7007,14 +7065,14 @@
       }
     },
     "tiny-invariant": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
-      "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
     },
     "tiny-warning": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
-      "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
     "tinycolor2": {
       "version": "1.4.1",
@@ -7451,9 +7509,9 @@
       "dev": true
     },
     "value-equal": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
-      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
     },
     "vary": {
       "version": "1.1.2",
diff --git a/demos/intermediate/package.json b/demos/intermediate/package.json
index ebfaf74..d715d36 100644
--- a/demos/intermediate/package.json
+++ b/demos/intermediate/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "^5.3.0",
     "react-router-guards": "^1.0.2",
     "react-waypoint": "^9.0.2",
     "rgbaster": "^2.1.1",
@@ -22,6 +22,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@types/babel__core": "^7.1.2",
+    "@types/react-router-dom": "^5.1.9",
     "babel-loader": "^8.0.6",
     "chalk": "^2.4.2",
     "copy-webpack-plugin": "^5.0.3",
diff --git a/demos/intermediate/src/containers/Detail/detail.module.scss b/demos/intermediate/src/containers/Detail/detail.module.scss
index c9f1e46..1eb412a 100644
--- a/demos/intermediate/src/containers/Detail/detail.module.scss
+++ b/demos/intermediate/src/containers/Detail/detail.module.scss
@@ -39,13 +39,30 @@
 
 .types {
   display: flex;
-  margin-bottom: $spacing--xl;
+  margin-bottom: $spacing--md;
 }
 
 .types-item {
   margin-right: $spacing--sm;
 }
 
+.links {
+  display: flex;
+  margin-bottom: $spacing--lg;
+}
+
+.links-item {
+  &:not(:last-child) {
+    margin-right: $spacing--md;
+  }
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
 .physique {
   display: flex;
   flex-direction: column;
diff --git a/demos/intermediate/src/containers/Detail/index.tsx b/demos/intermediate/src/containers/Detail/index.tsx
index 1124c9a..308fb03 100644
--- a/demos/intermediate/src/containers/Detail/index.tsx
+++ b/demos/intermediate/src/containers/Detail/index.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
-import { GuardFunction } from 'react-router-guards';
-import { LabeledSection, Recirculation, SpriteList, StatChart, Type } from 'components';
+import { Switch, useRouteMatch, Redirect } from 'react-router-dom';
+import { GuardFunction, GuardProvider, GuardedRoute } from 'react-router-guards';
+import { LabeledSection, Recirculation, SpriteList, StatChart, Type, Link } from 'components';
+import { waitOneSecond } from 'router/guards';
 import { MoveLearnType, SerializedPokemon } from 'types';
 import { api, className, serializePokemon } from 'utils';
 import styles from './detail.module.scss';
@@ -37,6 +39,8 @@ const Detail: React.FunctionComponent<Props> = ({
     [moves],
   );
 
+  const { path, url } = useRouteMatch();
+
   return (
     <div className={styles.container}>
       <SpriteList sprites={sprites} />
@@ -52,76 +56,108 @@ const Detail: React.FunctionComponent<Props> = ({
             </li>
           ))}
         </ul>
-        <section className={styles.physique}>
-          <LabeledSection className={styles.physiqueSection} label="Height">
-            <ul className={styles.physiqueList}>
-              <li className={styles.physiqueItem}>{height.metric}</li>
-              <li className={styles.physiqueItem}>{height.imperial}</li>
-            </ul>
-          </LabeledSection>
-          <LabeledSection className={styles.physiqueSection} label="Weight">
-            <ul className={styles.physiqueList}>
-              <li className={styles.physiqueItem}>{weight.metric}</li>
-              <li className={styles.physiqueItem}>{weight.imperial}</li>
-            </ul>
-          </LabeledSection>
-        </section>
-        <LabeledSection className={styles.abilities} label="Abilities">
-          <ul className={styles.list}>
-            {abilities.map(({ isHidden, name }) => (
-              <li key={name} className={styles.listItem}>
-                {name}
-                {isHidden && <span className={styles.hiddenLabel}>Hidden Ability</span>}
-              </li>
-            ))}
-          </ul>
-        </LabeledSection>
-        <section className={styles.stats}>
-          <h2 className={styles.sectionHeader}>Statistics</h2>
-          <LabeledSection className={styles.statsSection} label="Base Experience Yield">
-            <p>{baseExperience} XP</p>
-          </LabeledSection>
-          <LabeledSection className={styles.statsSection} label="Base Stats">
-            <StatChart stats={stats} />
-          </LabeledSection>
-        </section>
-        <section className={styles.moves}>
-          <h2 className={styles.sectionHeader}>Moves</h2>
-          {moves[MoveLearnType.LevelUp].length > 0 && (
-            <LabeledSection className={styles.moveSection} label="By leveling up" large>
-              <ul className={styles.table}>
-                <li className={styles.tableRow}>
-                  <LabeledSection
-                    {...className(styles.tableColumn, styles.tableColumnLevels)}
-                    label="Level"
-                  />
-                  <LabeledSection className={styles.tableColumn} label="Move" />
-                </li>
-                {moves[MoveLearnType.LevelUp].map(({ name, level }) => (
-                  <li key={name} {...className(styles.tableRow, styles.listItem)}>
-                    <p {...className(styles.tableColumn, styles.tableColumnLevels)}>{level}</p>
-                    <p className={styles.tableColumn}>{name}</p>
-                  </li>
-                ))}
-              </ul>
-            </LabeledSection>
-          )}
-          {moves[MoveLearnType.Egg].length > 0 && (
-            <LabeledSection className={styles.moveSection} label="From Egg" large>
-              {renderMoveList(MoveLearnType.Egg)}
-            </LabeledSection>
-          )}
-          {moves[MoveLearnType.Machine].length > 0 && (
-            <LabeledSection className={styles.moveSection} label="From TM/HM" large>
-              {renderMoveList(MoveLearnType.Machine)}
-            </LabeledSection>
-          )}
-          {moves[MoveLearnType.Tutor].length > 0 && (
-            <LabeledSection className={styles.moveSection} label="From Tutor" large>
-              {renderMoveList(MoveLearnType.Tutor)}
-            </LabeledSection>
-          )}
-        </section>
+
+        <ul className={styles.links}>
+          <li className={styles.linksItem}>
+            <Link to={url}>Physique</Link>
+          </li>
+          <li className={styles.linksItem}>
+            <Link to={`${url}/stats`}>Statistics</Link>
+          </li>
+          <li className={styles.linksItem}>
+            <Link to={`${url}/moves`}>Moves</Link>
+          </li>
+        </ul>
+
+        <div className={styles.content}>
+          <GuardProvider ignoreGlobal guards={[waitOneSecond]}>
+            <Switch>
+              <GuardedRoute path={path} exact>
+                <section className={styles.physique}>
+                  <LabeledSection className={styles.physiqueSection} label="Height">
+                    <ul className={styles.physiqueList}>
+                      <li className={styles.physiqueItem}>{height.metric}</li>
+                      <li className={styles.physiqueItem}>{height.imperial}</li>
+                    </ul>
+                  </LabeledSection>
+                  <LabeledSection className={styles.physiqueSection} label="Weight">
+                    <ul className={styles.physiqueList}>
+                      <li className={styles.physiqueItem}>{weight.metric}</li>
+                      <li className={styles.physiqueItem}>{weight.imperial}</li>
+                    </ul>
+                  </LabeledSection>
+                </section>
+                <LabeledSection className={styles.abilities} label="Abilities">
+                  <ul className={styles.list}>
+                    {abilities.map(({ isHidden, name }) => (
+                      <li key={name} className={styles.listItem}>
+                        {name}
+                        {isHidden && <span className={styles.hiddenLabel}>Hidden Ability</span>}
+                      </li>
+                    ))}
+                  </ul>
+                </LabeledSection>
+              </GuardedRoute>
+
+              <GuardedRoute path={`${path}/stats`} exact>
+                <section className={styles.stats}>
+                  <h2 className={styles.sectionHeader}>Statistics</h2>
+                  <LabeledSection className={styles.statsSection} label="Base Experience Yield">
+                    <p>{baseExperience} XP</p>
+                  </LabeledSection>
+                  <LabeledSection className={styles.statsSection} label="Base Stats">
+                    <StatChart stats={stats} />
+                  </LabeledSection>
+                </section>
+              </GuardedRoute>
+
+              <GuardedRoute path={`${path}/moves`} exact>
+                <section className={styles.moves}>
+                  <h2 className={styles.sectionHeader}>Moves</h2>
+                  {moves[MoveLearnType.LevelUp].length > 0 && (
+                    <LabeledSection className={styles.moveSection} label="By leveling up" large>
+                      <ul className={styles.table}>
+                        <li className={styles.tableRow}>
+                          <LabeledSection
+                            {...className(styles.tableColumn, styles.tableColumnLevels)}
+                            label="Level"
+                          />
+                          <LabeledSection className={styles.tableColumn} label="Move" />
+                        </li>
+                        {moves[MoveLearnType.LevelUp].map(({ name, level }) => (
+                          <li key={name} {...className(styles.tableRow, styles.listItem)}>
+                            <p {...className(styles.tableColumn, styles.tableColumnLevels)}>
+                              {level}
+                            </p>
+                            <p className={styles.tableColumn}>{name}</p>
+                          </li>
+                        ))}
+                      </ul>
+                    </LabeledSection>
+                  )}
+                  {moves[MoveLearnType.Egg].length > 0 && (
+                    <LabeledSection className={styles.moveSection} label="From Egg" large>
+                      {renderMoveList(MoveLearnType.Egg)}
+                    </LabeledSection>
+                  )}
+                  {moves[MoveLearnType.Machine].length > 0 && (
+                    <LabeledSection className={styles.moveSection} label="From TM/HM" large>
+                      {renderMoveList(MoveLearnType.Machine)}
+                    </LabeledSection>
+                  )}
+                  {moves[MoveLearnType.Tutor].length > 0 && (
+                    <LabeledSection className={styles.moveSection} label="From Tutor" large>
+                      {renderMoveList(MoveLearnType.Tutor)}
+                    </LabeledSection>
+                  )}
+                </section>
+              </GuardedRoute>
+
+              <Redirect from={`${path}/*`} to={path} />
+            </Switch>
+          </GuardProvider>
+        </div>
+
         <section className={styles.recirculation}>
           <Recirculation id={id} />
         </section>
diff --git a/demos/intermediate/src/router/index.tsx b/demos/intermediate/src/router/index.tsx
index 7c2cc20..0dcc137 100644
--- a/demos/intermediate/src/router/index.tsx
+++ b/demos/intermediate/src/router/index.tsx
@@ -18,7 +18,6 @@ const Router: React.FunctionComponent<Props> = ({ children }) => (
           <GuardedRoute path="/" exact component={List} />
           <GuardedRoute
             path="/:name"
-            exact
             component={Detail}
             guards={[waitOneSecond, detailBeforeEnter]}
           />
diff --git a/package.json b/package.json
index b6daecd..050ee15 100644
--- a/package.json
+++ b/package.json
@@ -48,10 +48,6 @@
     "*.{js,ts,tsx}": [
       "eslint --fix",
       "git add"
-    ],
-    "*.scss": [
-      "stylelint",
-      "git add"
     ]
   },
   "husky": {
diff --git a/package/src/Guard.tsx b/package/src/Guard.tsx
index e27d94c..253bd58 100644
--- a/package/src/Guard.tsx
+++ b/package/src/Guard.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
-import { __RouterContext as RouterContext } from 'react-router';
+import { __RouterContext as RouterContext, RouteComponentProps } from 'react-router';
 import { matchPath, Redirect, Route } from 'react-router-dom';
 import { ErrorPageContext, FromRouteContext, GuardContext, LoadingPageContext } from './contexts';
 import { usePrevious, useStateRef, useStateWhenMounted } from './hooks';
@@ -25,12 +25,19 @@ interface GuardsResolve {
 }
 
 const Guard: React.FunctionComponent<GuardProps> = ({ children, component, meta, render }) => {
-  const routeProps = useContext(RouterContext);
+  const routeProps: RouteComponentProps<Record<string, any>> = useContext(RouterContext);
   const routePrevProps = usePrevious(routeProps);
-  const hasPathChanged = useMemo(
-    () => routeProps.location.pathname !== routePrevProps.location.pathname,
-    [routePrevProps, routeProps],
-  );
+  const hasRouteChanged = useMemo(() => {
+    // Check if the route path has changed
+    if (routeProps.match.path !== routePrevProps.match.path) {
+      return true;
+    }
+    // Check if the parameters have changed
+    return Object.keys(routeProps.match.params).some(
+      key => routeProps.match.params[key] !== routePrevProps.match.params[key],
+    );
+  }, [routePrevProps, routeProps]);
+
   const fromRouteProps = useContext(FromRouteContext);
 
   const guards = useContext(GuardContext);
@@ -150,7 +157,7 @@ const Guard: React.FunctionComponent<GuardProps> = ({ children, component, meta,
   }, []);
 
   useEffect(() => {
-    if (hasPathChanged) {
+    if (hasRouteChanged) {
       setValidationsRequested(requests => requests + 1);
       setRouteError(null);
       setRouteRedirect(null);
@@ -159,13 +166,13 @@ const Guard: React.FunctionComponent<GuardProps> = ({ children, component, meta,
         validateRoute();
       }
     }
-  }, [hasPathChanged]);
+  }, [hasRouteChanged]);
 
-  if (hasPathChanged) {
+  if (hasRouteChanged) {
     if (hasGuards) {
       return renderPage(LoadingPage, routeProps);
     }
-    return null;
+    // return null;
   } else if (!routeValidated.current) {
     return renderPage(LoadingPage, routeProps);
   } else if (routeError) {