Upgrade to `react-router` v6

7 files changed, 105 insertions, 220 deletions

diff --git a/vnext/package-lock.json b/vnext/package-lock.json
index ac65b113..55bd8712 100644
--- a/vnext/package-lock.json
+++ b/vnext/package-lock.json
@@ -23,7 +23,7 @@
         "react-cookie": "^4.1.1",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.38.0",
-        "react-router-dom": "^5.3.4",
+        "react-router-dom": "^6.4.2",
         "react-use": "^17.4.0",
         "regenerator-runtime": "^0.13.10",
         "svg4everybody": "^2.1.9",
@@ -3138,6 +3138,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+      "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.50",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz",
@@ -7756,19 +7764,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -8610,11 +8605,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -11236,6 +11226,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12876,6 +12867,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -13285,47 +13277,33 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+      "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
+      "dependencies": {
+        "@remix-run/router": "1.0.2"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+      "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
+      "dependencies": {
+        "@remix-run/router": "1.0.2",
+        "react-router": "6.4.2"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router/node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
     "node_modules/react-shallow-renderer": {
@@ -13714,11 +13692,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/resolve-pathname": {
-      "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=="
-    },
     "node_modules/resolve.exports": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
@@ -14982,16 +14955,6 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
-    "node_modules/tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -15404,11 +15367,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -18136,6 +18094,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+      "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ=="
+    },
     "@sinclair/typebox": {
       "version": "0.24.50",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz",
@@ -21599,19 +21562,6 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
-    "history": {
-      "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": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -22211,11 +22161,6 @@
         "is-docker": "^2.0.0"
       }
     },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -24167,7 +24112,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
     },
     "object-code": {
       "version": "1.2.4",
@@ -25220,6 +25166,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -25510,43 +25457,20 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
-      "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "dependencies": {
-        "path-to-regexp": {
-          "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"
-          }
-        }
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+      "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
+      "requires": {
+        "@remix-run/router": "1.0.2"
       }
     },
     "react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+      "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
       "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.0.2",
+        "react-router": "6.4.2"
       }
     },
     "react-shallow-renderer": {
@@ -25852,11 +25776,6 @@
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
       "dev": true
     },
-    "resolve-pathname": {
-      "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.exports": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
@@ -26858,16 +26777,6 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
-    "tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -27173,11 +27082,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "value-equal": {
-      "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",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/vnext/package.json b/vnext/package.json
index bf5dc14a..cfcfee29 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -91,7 +91,7 @@
     "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.38.0",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^6.4.2",
     "react-use": "^17.4.0",
     "regenerator-runtime": "^0.13.10",
     "svg4everybody": "^2.1.9",
diff --git a/vnext/src/App.js b/vnext/src/App.js
index b56e0300..79fde2d1 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { Route, Link, Switch } from 'react-router-dom';
+import { Route, Link, Routes } from 'react-router-dom';
 import { useScroll, useRafState } from 'react-use';
 import qs from 'qs';
 
@@ -183,47 +183,21 @@ export default function App({ footer }) {
           </aside>
         }
         <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
-          <Switch>
-            <Route exact path="/">
-              <Discussions visitor={visitor} />
-            </Route>
-            <Route exact path="/home">
-              <Home visitor={visitor} />
-            </Route>
-            <Route exact path="/discover">
-              <Discover visitor={visitor} />
-            </Route>
-            <Route exact path="/settings">
-              <Settings visitor={visitor} onChange={auth} />
-            </Route>
-            <Route exact path="/login">
-              <Login visitor={visitor} onAuth={auth} />
-            </Route>
-            <Route exact path="/post">
-              <Post visitor={visitor} />
-            </Route>
-            <Route exact path="/pm">
-              <Contacts visitor={visitor} />
-            </Route>
-            <Route exact path="/pm/:user">
-              <Chat connection={eventSource} visitor={visitor} />
-            </Route>
-            <Route exact path="/:user/friends">
-              <Friends />
-            </Route>
-            <Route exact path="/:user/readers">
-              <Readers />
-            </Route>
-            <Route exact path="/:user">
-              <Blog visitor={visitor} />
-            </Route>
-            <Route exact path="/tag/:tag">
-              <Tag visitor={visitor} />
-            </Route>
-            <Route exact path="/:user/:mid">
-              <Thread connection={eventSource} visitor={visitor} />
-            </Route>
-          </Switch>
+          <Routes>
+            <Route exact path="/" element={<Discussions visitor={visitor} />} />
+            <Route exact path="/home" element={<Home visitor={visitor} />} />
+            <Route exact path="/discover" element={<Discover visitor={visitor} />} />
+            <Route exact path="/settings" element={<Settings visitor={visitor} onChange={auth} />} />
+            <Route exact path="/login" element={<Login visitor={visitor} onAuth={auth} />} />
+            <Route exact path="/post" element={<Post visitor={visitor} />} />
+            <Route exact path="/pm" element={<Contacts visitor={visitor} />} />
+            <Route exact path="/pm/:user" element={<Chat connection={eventSource} visitor={visitor} />} />
+            <Route exact path="/:user/friends" element={<Friends />} />
+            <Route exact path="/:user/readers" element={<Readers />} />
+            <Route exact path="/:user" element={<Blog visitor={visitor} />} />
+            <Route exact path="/tag/:tag" element={<Tag visitor={visitor} />} />
+            <Route exact path="/:user/:mid" element={<Thread connection={eventSource} visitor={visitor} />} />
+          </Routes>
         </section>
       </div>
     </>
diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index d6813130..c9199fa6 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { Link, useLocation, useHistory, useParams } from 'react-router-dom';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import { Link, useLocation, useParams, Navigate } from 'react-router-dom';
 
 import qs from 'qs';
 import moment from 'moment';
@@ -25,6 +25,19 @@ import { getMessages } from '../api';
  * @property {import('../api').Message[]=} msgs
  */
 
+function RequireAuth({ visitor, children }) {
+  let location = useLocation();
+  if (!visitor.hash) {
+    // Redirect them to the /login page, but save the current location they were
+    // trying to go to when they were redirected. This allows us to send them
+    // along to that page after they login, which is a nicer user experience
+    // than dropping them off on the home page.
+    return <Navigate to="/login" state={{ from: location }} />;
+  }
+
+  return children;
+}
+
 /**
  * @param {PageProps} props
  */
@@ -36,7 +49,7 @@ export function Discover({ visitor }) {
     search: search,
     pageParam: search.search ? 'page' : 'before_mid'
   };
-  return (<Feed authRequired={false} query={query} visitor={visitor} />);
+  return (<Feed query={query} visitor={visitor} />);
 }
 
 /**
@@ -47,7 +60,7 @@ export function Discussions({ visitor }) {
     baseUrl: '/api/messages/discussions',
     pageParam: 'to'
   };
-  return (<Feed authRequired={false} query={query} visitor={visitor} />);
+  return (<Feed query={query} visitor={visitor} />);
 }
 
 /**
@@ -70,7 +83,7 @@ export function Blog({ visitor }) {
       <div className="msg-cont">
         <UserInfo uname={user} />
       </div>
-      <Feed authRequired={false} query={query} visitor={visitor} />
+      <Feed query={query} visitor={visitor} />
     </>
   );
 }
@@ -88,7 +101,7 @@ export function Tag({ visitor }) {
     },
     pageParam: 'before_mid'
   };
-  return (<Feed authRequired={false} query={query} visitor={visitor} />);
+  return (<Feed query={query} visitor={visitor} />);
 }
 
 /**
@@ -99,12 +112,15 @@ export function Home({ visitor }) {
     baseUrl: '/api/home',
     pageParam: 'before_mid'
   };
-  return (<Feed authRequired={true} query={query} visitor={visitor} />);
+  return (
+    <RequireAuth visitor={visitor}>
+      <Feed query={query} visitor={visitor} />
+    </RequireAuth>
+  );
 }
 
 /**
  * @typedef {Object} FeedState
- * @property { boolean } authRequired
  * @property { import('../api').SecureUser } visitor
  * @property { import('../api').Message[]= } msgs
  * @property { Query} query
@@ -113,11 +129,9 @@ export function Home({ visitor }) {
 /**
  * @param {FeedState} props
  */
-function Feed({ visitor, query, authRequired }) {
+function Feed({ visitor, query }) {
   const location = useLocation();
-  const history = useHistory();
   const [state, setState] = useState({
-    authRequired: authRequired,
     hash: visitor.hash,
     msgs: [],
     nextpage: null,
@@ -125,7 +139,6 @@ function Feed({ visitor, query, authRequired }) {
     tag: ''
   });
   const [loading, setLoading] = useState(true);
-
   useEffect(() => {
     setLoading(true);
     const filter = location.search.substring(1);
@@ -135,23 +148,17 @@ function Feed({ visitor, query, authRequired }) {
       newFilter[pageParam] = pageValue;
       return `?${qs.stringify(newFilter)}`;
     };
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
     const filterParams = qs.parse(filter);
     let params = Object.assign({}, filterParams || {}, query.search || {});
     let url = query.baseUrl;
-    if (state.hash) {
-      params.hash = state.hash;
-    }
-    if (!params.hash && state.authRequired) {
-      history.push('/');
-    }
     getMessages(url, params)
       .then(response => {
         const { data } = response;
         const { pageParam } = query;
         const lastMessage = data.slice(-1)[0] || {};
         const nextpage = getPageParam(pageParam, lastMessage, filterParams);
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
         setState((prevState) => {
           return {
             ...prevState,
@@ -169,7 +176,7 @@ function Feed({ visitor, query, authRequired }) {
           };
         });
       });
-  }, [location.search, state.hash, state.authRequired, history, query]);
+  }, [location.search, query]);
   return (state.msgs.length > 0 ? (
     <div className="msgs">
       {
diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js
index 1574a489..3162c9ea 100644
--- a/vnext/src/ui/Header.js
+++ b/vnext/src/ui/Header.js
@@ -1,12 +1,12 @@
 import { memo, useCallback } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import Icon from './Icon';
 import { UserLink } from './UserInfo';
 import SearchBox from './SearchBox';
 
 function Header({ visitor, className }) {
-    const history = useHistory();
+    const navigate = useNavigate();
     /**
      * @param {string} searchString
      */
@@ -14,8 +14,8 @@ function Header({ visitor, className }) {
         let location = {};
         location.pathname = '/discover';
         location.search = `?search=${searchString}`;
-        history.push(location);
-    }, [history]);
+        navigate(location);
+    }, [navigate]);
     return (
         <div id="header" className={className}>
             <div id="header_wrapper">
diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js
index fc3922c8..5a96c822 100644
--- a/vnext/src/ui/Login.js
+++ b/vnext/src/ui/Login.js
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import Icon from './Icon';
 import Button from './Button';
@@ -22,15 +22,15 @@ import './Login.css';
 function Login({ visitor, onAuth }) {
 
     const location = useLocation();
-    const history = useHistory();
+    const navigate = useNavigate();
 
     useEffect(() => {
         if (visitor.hash) {
             const {retpath } = location.state || '/';
             console.log(retpath);
-            history.push(retpath);
+            navigate(retpath);
         }
-    }, [history, location.state, visitor]);
+    }, [navigate, location.state, visitor]);
 
     const { register, handleSubmit, formState: { errors }, } = useForm();
 
diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js
index d8d841e1..a1d14ea0 100644
--- a/vnext/src/ui/Post.js
+++ b/vnext/src/ui/Post.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import qs from 'qs';
 
@@ -13,7 +13,7 @@ import { post, update } from '../api';
  */
 export default function Post({ visitor }) {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   let draftMessage = (location.state || {}).draft || {};
   let [draft, setDraft] = useState(draftMessage.body);
   let params = qs.parse(window.location.search.substring(1));
@@ -24,7 +24,7 @@ export default function Post({ visitor }) {
       .then(response => {
         if (response.status === 200) {
           const msg = response.data.newMessage;
-          history.push(`/${visitor.uname}/${msg.mid}`);
+          navigate(`/${visitor.uname}/${msg.mid}`);
         }
       }).catch(console.log);
   };