add router

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ts5-obs-overlay",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ts5-obs-overlay",
-      "version": "1.3.1",
+      "version": "2.0.0",
       "dependencies": {
         "@types/node": "^20.8.3",
         "react": "^18.2.0",

src/App.tsx

@@ -1,6 +1,6 @@
 import "@styles/App.scss";
 
-import { useSearchParams } from "react-router-dom";
+import { Route, Routes, useSearchParams } from "react-router-dom";
 import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
 import Viewer from "./Viewer";
 
@@ -18,20 +18,25 @@ export default function App() {
   });
 
   return (
-    <div className="App">
-      <Viewer
-        showChannelName={searchParams.get("showChannelName") === "true"}
-        hideNonTalking={searchParams.get("hideNonTalking") === "true"}
-        clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
-        clients={
-          clients.map((client) => {
-            if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
-              return client;
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <Viewer
+            showChannelName={searchParams.get("showChannelName") === "true"}
+            hideNonTalking={searchParams.get("hideNonTalking") === "true"}
+            clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
+            clients={
+              clients.map((client) => {
+                if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
+                  return client;
+                }
+              }) as IClient[]
             }
-          }) as IClient[]
+            channel={currentChannel}
+          />
         }
-        channel={currentChannel}
       />
-    </div>
+    </Routes>
   );
 }

src/main.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
 import "@styles/index.scss";
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <BrowserRouter>
     <App />
   </BrowserRouter>

tsconfig.json

@@ -19,6 +19,7 @@
 
     /* Bundler mode */
     "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,