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/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,
 }: {