assignment-3 router

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^5.3.4",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -71,3 +71,17 @@ h1 {
   border-radius: 5px;
   margin-bottom: 2rem;
 }
+.addTodo {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid #f1356d; /* Border color */
+  color: #ffffff; /* Text color */
+  background-color: #f1356d; /* Background color */
+  border-radius: 3px; /* Rounded corners */
+  transition: background-color 0.3s ease;
+}

src/App.js

@@ -1,11 +1,23 @@
 import './App.css';
 import Home from './Home';
-//import TodoWrapper from './TodoComponent/TodoWrapper';
+import { BrowserRouter as Router,Route,Switch } from 'react-router-dom'
+import TodoWrapper from './TodoComponent/TodoWrapper';
+//import TodoDetails from './TodoComponent/TodoDetails';
 
 function App() {
   return (
     <div className="App">
-      <Home></Home>
+      <Router>
+        <Switch>
+        <Route exact path="/">
+        <Home></Home>
+          </Route>
+          <Route path="/add-todo">
+            <TodoWrapper></TodoWrapper>
+          </Route>  
+        </Switch>
+      </Router>
+
       {/* <TodoWrapper/> */}
     </div>
   );

src/Home.js

@@ -1,4 +1,5 @@
 
+import { Link } from "react-router-dom/cjs/react-router-dom.min";
 import ProductList from "./ProductList";
 import useFetch from "./useFetch";
 
@@ -11,6 +12,8 @@ const Home = () => {
     return ( 
         <div className="homepage">
             <h1>Home Page</h1>
+            <Link to="/add-todo"><button className="addTodo">Add Todo</button></Link>
+
             {Data &&  <ProductList data={Data}></ProductList>}
             {error && <p>{ error }</p>}
             {pending && <h4>...Loading</h4>}

src/TodoComponent/TodoWrapper.js

@@ -3,6 +3,9 @@ import TodoForm from "./TodoForm";
 import { v4 as uuidv4 } from "uuid";
 import Todo from "./Todo";
 
+//import TodoDetails from "./TodoDetails";
+import { Link } from 'react-router-dom';
+
 
 const TodoWrapper = () => {
 
@@ -22,11 +25,12 @@ const TodoWrapper = () => {
 
             <h1>Get Things Done !</h1><TodoForm addTodo={addTodo}></TodoForm>
             {todoList.map((todo,index)=>
-                <Todo  task={todo} key={index} HandleDelete={HandleDelete}/>
-
+
+            <Link to={`/todo/ ${todo.id}`}>
+            <Todo  task={todo} key={index} HandleDelete={HandleDelete}/></Link>
+)}
+
 
-            )}
-
         </div>
     );