diff --git a/control-station/package-lock.json b/control-station/package-lock.json
index 969251ec..de2cb234 100644
--- a/control-station/package-lock.json
+++ b/control-station/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.23.1",
"socket.io-client": "^4.7.2"
},
"devDependencies": {
@@ -164,6 +165,14 @@
"node": ">= 8"
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.16.1",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+ "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/@socket.io/component-emitter": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@@ -2483,6 +2492,36 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
+ "node_modules/react-router": {
+ "version": "6.23.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+ "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+ "dependencies": {
+ "@remix-run/router": "1.16.1"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.23.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+ "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+ "dependencies": {
+ "@remix-run/router": "1.16.1",
+ "react-router": "6.23.1"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/reflect.getprototypeof": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
diff --git a/control-station/package.json b/control-station/package.json
index cc02ea57..7eb36f82 100644
--- a/control-station/package.json
+++ b/control-station/package.json
@@ -14,6 +14,7 @@
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.23.1",
"socket.io-client": "^4.7.2"
},
"devDependencies": {
diff --git a/control-station/src/App.tsx b/control-station/src/App.tsx
index a7ad4368..9d399855 100644
--- a/control-station/src/App.tsx
+++ b/control-station/src/App.tsx
@@ -1,7 +1,8 @@
import { ControlPanel, Navbar } from "@/components";
import usePodData from "./services/usePodData";
import PodContext from "./services/PodContext";
-import { Dashboard } from "@/views";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Dashboard, Dynamics } from "@/views";
function App() {
const { podData, podSocketClient } = usePodData();
@@ -10,7 +11,12 @@ function App() {