Setup: Routing in app

package.json

@@ -17,7 +17,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",

src/App.tsx

@@ -1,11 +1,18 @@
 import './App.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Navbar from './components/navbar';
+import FeatureFlagList from './pages/FeatureFlagList';
+import FeatureFlagDetails from './pages/FeatureFlagDetails';
 
 const App = () => {
   return (
-    <>
+    <BrowserRouter>
       <Navbar />
-    </>
+      <Routes>
+        <Route path="/featureFlag" element={<FeatureFlagList />} />
+        <Route path="/featureFlag/:id" element={<FeatureFlagDetails />} />
+      </Routes>
+    </BrowserRouter>
   );
 };
 

src/pages/FeatureFlagDetails.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const FeatureFlagDetails: React.FC = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="container mx-auto mt-20 p-4">
+      <h1 className="mb-4 text-2xl font-bold">Feature Flag Details</h1>
+      <p>Feature Flag ID: {id}</p>
+    </div>
+  );
+};
+
+export default FeatureFlagDetails;

src/pages/FeatureFlagList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+const FeatureFlagList: React.FC = () => {
+  return (
+    <div className="container mx-auto mt-20 p-4">
+      <h1 className="mb-4 text-2xl font-bold">Feature Flags</h1>
+    </div>
+  );
+};
+
+export default FeatureFlagList;