client/web: add route management for ui pages

Using wouter, a lightweight React routing library.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "wouter": "^2.11.0"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.10",

client/web/src/components/app.tsx

@@ -6,22 +6,32 @@ import ManagementClientView from "src/components/views/management-client-view"
 import ReadonlyClientView from "src/components/views/readonly-client-view"
 import useAuth, { AuthResponse, SessionsCallbacks } from "src/hooks/auth"
 import useNodeData from "src/hooks/node-data"
+import { Route, Switch } from "wouter"
 
 export default function App() {
   const { data: auth, loading: loadingAuth, sessions } = useAuth()
 
   return (
-    <div className="flex flex-col items-center min-w-sm max-w-lg mx-auto py-14">
+    <main className="flex flex-col items-center min-w-sm max-w-lg mx-auto py-14">
       {loadingAuth ? (
         <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
       ) : (
-        <WebClient auth={auth} sessions={sessions} />
+        <Switch>
+          <Route path="/">
+            <HomeView auth={auth} sessions={sessions} />
+          </Route>
+          <Route path="/details">{/* TODO */}Device details</Route>
+          <Route path="/subnets">{/* TODO */}Subnet router</Route>
+          <Route path="/ssh">{/* TODO */}Tailscale SSH server</Route>
+          <Route path="/serve">{/* TODO */}Share local content</Route>
+          <Route>Page not found</Route>
+        </Switch>
       )}
-    </div>
+    </main>
   )
 }
 
-function WebClient({
+function HomeView({
   auth,
   sessions,
 }: {

client/web/yarn.lock

@@ -1765,6 +1765,11 @@ update-browserslist-db@^1.0.11:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -1857,6 +1862,13 @@ why-is-node-running@^2.2.2:
     siginfo "^2.0.0"
     stackback "0.0.2"
 
+wouter@^2.11.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/wouter/-/wouter-2.12.1.tgz#11d913324c6320b679873783acb15ea3523b8521"
+  integrity sha512-G7a6JMSLSNcu6o8gdOfIzqxuo8Qx1qs+9rpVnlurH69angsSFPZP5gESNuVNeJct/MGpQg191pDo4HUjTx7IIQ==
+  dependencies:
+    use-sync-external-store "^1.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"