use useRouter

styles/TopAppBar.tsx

@@ -1,36 +1,31 @@
-import React, { useState } from "react";
-import { withRouter } from "next/router";
+import React from "react";
+import { useRouter } from "next/router";
 import { AppBar, Tabs, Tab } from "@material-ui/core";
 import routes from "../routes";
 
-const TopAppBar = withRouter(({ router }) => {
-  const [value, setValue] = useState(
-    routes.findIndex(({ pathname }) => pathname === router.pathname)
-  );
-  router.events.on("routeChangeStart", (url: string) => {
-    setValue(
-      routes.findIndex(
-        ({ pathname }) => pathname === url.replace(/(?<=.)\/$/, "")
-      )
-    );
-  });
+const TopAppBar = () => {
+  const router = useRouter();
+  const pathname = (
+    routes.find(({ pathname }) => pathname === router.pathname) || {
+      pathname: "/"
+    }
+  ).pathname;
   return (
     <AppBar color="default">
       <Tabs
-        value={value}
+        value={pathname}
         onChange={(_, value) => {
-          router.push(routes[value].pathname);
-          setValue(value);
+          router.push(value);
         }}
         variant="fullWidth"
         indicatorColor="primary"
         textColor="primary"
       >
-        {routes.map(({ icon }, i) => (
-          <Tab key={i} icon={icon} />
+        {routes.map(({ pathname, icon }) => (
+          <Tab key={pathname} value={pathname} icon={icon} />
         ))}
       </Tabs>
     </AppBar>
   );
-});
+};
 export default TopAppBar;