src/App.tsx

@@ -4,6 +4,7 @@ import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
 import Robot from './pages/Robot/Robot.tsx';
+import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 
 function App(){
 
@@ -27,6 +28,16 @@ function App(){
           <Route path="/" element={<Home />} />
           <Route path="/template" element={<TemplatePage />} />
           <Route path="/robot" element={<Robot />} />
+          <Route
+          path="/ConnectedRobots"
+          // Pass the useState to the page to update from there
+          element={
+            <ConnectedRobots
+               connectedRobots={connectedRobots}
+               setConnectedRobots={setConnectedRobots}
+             />
+            }
+          />
         </Routes>
       </main>
     </div>

src/pages/Home/Home.tsx

@@ -13,6 +13,7 @@ function Home() {
       <div className={styles.links}>
         <Link to={"/robot"}>Robot Interaction →</Link>
         <Link to={"/template"}>Template →</Link>
+        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
       </div>
     </div>
   )