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,7 +18,10 @@ export default function App() {
   });
 
   return (
-    <div className="App">
+    <Routes>
+      <Route
+        path="/"
+        element={
           <Viewer
             showChannelName={searchParams.get("showChannelName") === "true"}
             hideNonTalking={searchParams.get("hideNonTalking") === "true"}
@@ -32,6 +35,8 @@ export default function App() {
             }
             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,