Added form to get username, and show it on user page - using useNavigate, useLocation and react-router-dom

Author: dev-nitinrai

package-lock.json

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

package.json

@@ -1,9 +1,25 @@
-function App() {
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function App() {
+  const [username, setUsername] = useState('');
+  const handleChange = e => setUsername(e.target.value);
+  const navigate = useNavigate();
+  
   return (
-    <div className="App">
-      <h1>Hello World</h1>
-    </div>
+    <main>
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            navigate('/user', {
+              state: {
+                id: username,
+              }
+            })
+          }}>
+          <label htmlFor="username">Type your username</label>
+          <input name="username" type="text" onChange={handleChange} />
+        </form>
+    </main>
   );
-}
-
-export default App;
+}

src/App.js

@@ -1,10 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import App from "./App";
+import User from "./user";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<App />} />
+      <Route path="user" element={<User />} />
+    </Routes>
+    </BrowserRouter>
   </React.StrictMode>
-);
+);

src/index.js

@@ -0,0 +1,12 @@
+import { useLocation } from "react-router";
+
+const User = (props) => {
+  const location = useLocation();
+  const username = location.state.id;
+
+  return (
+    <h1>Hello {username}</h1>
+  );
+}
+
+export default User;