Update

threagile-monitoring/src/threagile_monitoring/components/App.js

@@ -1,34 +1,20 @@
-// import { React, Router, Route, Switch } from 'react'
-import {React, Router} from 'react';
+import { React, Switch } from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Layout from './Layout'
+import NoMatch from './NoMatch'
 
-function App() {
+const App = () => {
   return (
-    <div>
-      <h1>Hello, World!</h1>
-      <p>This is a React component.</p>
-      <Router>
-
-      </Router>
-    </div>
-  );
+    <>
+      <Routes>
+        <Switch>
+          <Route exact path='/' element={<Layout showHome />} />
+          <Route path='/dashboards' element={<Layout showDashboard />} />
+          <Route path='*' component={() => <NoMatch />} />
+        </Switch>
+      </Routes>
+    </>
+  )
 }
 
-
-// const App = () => {
-//   return (
-//     <div className='App'>
-//       <Router>
-//         <Switch>
-//           <Route exact path='/' component={() => <Layout showHome />} />
-//           <Route
-//             exact
-//             path='/dashboards'
-//             component={() => <Layout showDashboard />}
-//           />
-//         </Switch>
-//       </Router>
-//     </div>
-//   )
-// }
-
 export default App

threagile-monitoring/src/threagile_monitoring/components/NoMatch.js

@@ -0,0 +1,9 @@
+function NoMatch() {
+    return (
+      <div className='NoMatch'>
+        No Match Found
+      </div>
+    );
+}
+
+export default NoMatch;

threagile-monitoring/src/threagile_monitoring/components/NoMatch.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react'
+import NoMatch from './NoMatch'
+
+test('renders No Match text', () => {
+  render(<NoMatch />)
+  const textElement = screen.getByText('No Match')
+  expect(textElement).toBeInTheDocument()
+})