React Router Dom Test

IT18021080/Telemedicine-Chat-App/frontend/package.json

@@ -2,7 +2,7 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  "proxy":"http://127.0.0.1:5000",
+  "proxy": "http://127.0.0.1:5000",
   "dependencies": {
     "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11.9.0",
@@ -13,6 +13,7 @@
     "framer-motion": "^6.2.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

IT18021080/Telemedicine-Chat-App/frontend/src/App.js

 
-import { Button } from '@chakra-ui/react';
-import './App.css';
+import "./App.css";
+import { Route } from "react-router-dom";
+import Homepage from "./Pages/Homepage";
+import { Button } from "@chakra-ui/react";
+import ChatPage from "./Pages/ChatPage";
+
 
 function App() {
   return (
     <div className="App">
-     <Button colorScheme='blue'>Button</Button>
+      <Route path="/" component={Homepage} exact />
+      <Route path="/chats" component={ChatPage} />
+      <Button colorScheme='blue'>Button</Button>
     </div>
   );
 }

IT18021080/Telemedicine-Chat-App/frontend/src/Pages/ChatPage.js

+import React from "react";
+
+const ChatPage = () => {
+    return (
+        <div>Chat Page</div>
+    );
+}
+
+export default ChatPage
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/Pages/Homepage.js

+import React from "react";
+
+const Homepage = () => {
+    return(
+    <div>
+        Home Page
+    </div>
+    );
+}
+
+export default Homepage;
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import { ChakraProvider } from '@chakra-ui/react'
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import { ChakraProvider } from "@chakra-ui/react";
+import { BrowserRouter } from "react-router-dom";
 
 
 ReactDOM.render(
   <React.StrictMode>
+    <BrowserRouter>
     <ChakraProvider>
       <App />
     </ChakraProvider>
-    
+    </BrowserRouter>
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
   //rendering everything on root tag
 );