update

src/App.js

@@ -1,7 +1,13 @@
 import React from 'react';
 import './App.css';
-import "bootstrap/dist/css/bootstrap.min.css";
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
-import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import CreateTodo from './components/create-todo.component';
+import EditTodo from './components/edit-todo.component';
+import TodosList from './components/todos-list.component';
+
 
 function App() {
   return (
@@ -9,9 +15,9 @@ function App() {
       <div className="container">
         <h2>MERN-Stack Todo App</h2>
       </div>
-      <Route path="/" exact component={TodoList} />
+      <Route path="/" exact component={TodosList} />
-      <Route path="/edit/:id" exact component={EditTodo} />
+      <Route path="/edit/:id" component={EditTodo} />
-      <Route path="/create" exact component={CreateTodo} />
+      <Route path="/create" component={CreateTodo} />
     </Router>
 
   );

src/components/create-todo.component.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default class CreateTodo extends React.Component {
+    render() {
+        return (
+            <div>
+                <p>Welcome to Create Todo Component!!</p>
+            </div>
+        )
+    }
+}

src/components/edit-todo.component.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default class EditTodo extends React.Component {
+    render() {
+        return (
+            <div>
+                <p>Welcome to Edit Todo Component!!</p>
+            </div>
+        )
+    }
+}

src/components/todos-list.component.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default class TodosList extends React.Component {
+    render() {
+        return (
+            <div>
+                <p>Welcome to Todos List Component!!</p>
+            </div>
+        )
+    }
+}