[#78] Refactor App component

App component is refactored to Router component
react-router-dom bump to version 6

package.json

@@ -16,16 +16,14 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "vite-plugin-env-compatible": "^2.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.4.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@frogcat/ttl2jsonld": "^0.0.6",
     "@kbss-cvut/s-forms": "^0.7.2-beta-6cfd5af.0",
     "@tippyjs/react": "^4.2.5",
     "@triply/yasgui": "^4.2.14",
+    "@vitejs/plugin-react": "^4.3.1",
     "bootstrap": "^4.5.3",
     "cytoscape": "^3.30.2",
     "cytoscape-compound-drag-and-drop": "^1.1.0",
@@ -43,13 +41,14 @@
     "react-bootstrap": "^1.4.3",
     "react-cytoscapejs": "^1.2.1",
     "react-dom": "^18.2.0",
-    "react-imported-component": "^6.5.4",
     "react-json-pretty": "^2.2.0",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^6.27.0",
     "react-spring": "^8.0.27",
     "react-treebeard": "^3.2.4",
     "semantic-ui-react": "^2.1.5",
-    "superagent": "^6.1.0"
+    "superagent": "^6.1.0",
+    "vite": "^5.4.2",
+    "vite-plugin-env-compatible": "^2.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^9.7.6",

src/Router.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Routes, BrowserRouter, Route } from "react-router-dom";
+import Layout from "./components/Layout.jsx";
+import Home from "./components/Home.jsx";
+import Scripts from "./components/Scripts.jsx";
+import Executions from "./components/Executions.jsx";
+import NoMatch from "./components/NoMatch.jsx";
+import Dagre from "./components/dagre/Dagre.jsx";
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="scripts" element={<Scripts />} />
+        <Route path="executions" element={<Executions />} />
+        <Route path="*" element={<NoMatch />} />
+        <Route path="script" element={<Dagre />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Router;

src/components/Layout.jsx

@@ -2,14 +2,15 @@ import React from "react";
 import { Container, Icon } from "semantic-ui-react";
 import { Navbar } from "react-bootstrap";
 import NavbarMenu from "./NavbarMenu";
+import { Outlet } from "react-router-dom";
 
 const Layout = ({ children }) => {
   return (
     <div>
       <NavbarMenu />
-
-      <Container>{children}</Container>
-
+      <Container>
+        <Outlet />
+      </Container>
       <div className="fixed-bottom">
         <Navbar color="dark">
           <Container>