React Router

Author: GregBrimble

package-lock.json

@@ -15,6 +15,7 @@
     "classnames": "2.2.6",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1",
     "typescript": "4.1.3",
     "web-vitals": "1.1.0"
@@ -56,6 +57,7 @@
     "@fab/server": "1.0.0-rc.9",
     "@tailwindcss/postcss7-compat": "2.0.2",
     "@types/classnames": "2.2.11",
+    "@types/react-router-dom": "5.1.7",
     "autoprefixer": "9.8.6",
     "postcss": "7.0.35",
     "tailwindcss": "npm:@tailwindcss/[email protected]"

package.json

@@ -1,7 +1,16 @@
-import { Home } from "./components/Home";
+import { Home } from "./pages/Home";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 function App() {
-  return <Home />;
+  return (
+    <Router>
+      <Switch>
+        <Route path="/">
+          <Home />
+        </Route>
+      </Switch>
+    </Router>
+  );
 }
 
 export default App;

src/App.tsx

@@ -1,6 +1,7 @@
 import { FC, useState } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import classNames from "classnames";
+import { Link } from "react-router-dom";
 
 export const Home: FC = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -207,13 +208,13 @@ export const Home: FC = () => {
               <div className="grid grid-cols-3 gap-8 items-center">
                 <div className="col-span-2">
                   <nav className="flex space-x-4">
-                    <a
-                      href="/"
+                    <Link
+                      to="/"
                       className="text-white text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10"
                       aria-current="page"
                     >
                       Home
-                    </a>
+                    </Link>
 
                     <a
                       href="/"
@@ -341,12 +342,12 @@ export const Home: FC = () => {
                   </div>
                 </div>
                 <div className="mt-3 px-2 space-y-1">
-                  <a
-                    href="/"
+                  <Link
+                    to="/"
                     className="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
                   >
                     Home
-                  </a>
+                  </Link>
                   <a
                     href="/"
                     className="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"