first commit

Author: fazt

package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
   },

package.json

@@ -1,25 +1,33 @@
-import logo from './logo.svg';
-import './App.css';
+import {
+  BrowserRouter as Router,
+  Navigate,
+  Route,
+  Routes,
+} from "react-router-dom";
 
-function App() {
+import HomePage from "./pages/HomePage";
+import AboutPage from "./pages/AboutPage";
+import UsersPage from "./pages/UsersPage";
+import UserPage from "./pages/UserPage";
+import Navbar from "./components/Navbar";
+import DashboardPage from "./pages/DashboardPage";
+
+export default function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Navbar />
+
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/users/*" element={<UserPage />} />
+        <Route path="/users" element={<UsersPage />} />
+        <Route path="/myusers/" element={<Navigate replace to="/users" />} />
+        <Route path="/users/:id" element={<UserPage />} />
+        <Route path="/dashboard/*" element={<DashboardPage />}>
+          <Route path="welcome" element={<p>Welcome!</p>} />
+        </Route>
+      </Routes>
+    </Router>
   );
 }
-
-export default App;

src/App.css

@@ -0,0 +1,35 @@
+import { NavLink } from "react-router-dom";
+import "./navbar.css";
+
+export default function Navbar() {
+  return (
+    <div>
+      <ul>
+        <li>
+          <NavLink
+            to="/"
+            className={({ isActive }) => (isActive ? "active" : "")}
+          >
+            Home
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/users"
+            className={({ isActive }) => (isActive ? "active" : "")}
+          >
+            Users
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            className={({ isActive }) => (isActive ? "active" : "")}
+            to="/about"
+          >
+            About
+          </NavLink>
+        </li>
+      </ul>
+    </div>
+  );
+}

src/App.js

@@ -0,0 +1,4 @@
+.active {
+  color: red;
+  font-weight: bold;
+}

src/App.test.js

@@ -1,17 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+ReactDOM.render(<App />, document.getElementById("root"));

src/components/Navbar.js

@@ -0,0 +1,8 @@
+import React from 'react'
+export default function AboutPage() {
+  return (
+    <div>
+      About
+    </div>
+  )
+}

src/components/navbar.css

@@ -0,0 +1,21 @@
+import { Link, Outlet, useNavigate } from "react-router-dom";
+
+export default function DashboardPage() {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate("/");
+  };
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+
+      <Link to="welcome">Say Welcome</Link>
+
+      <Outlet />
+
+      <button onClick={handleClick}>Logout</button>
+    </div>
+  );
+}

src/index.css

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function HomePage() {
+  return (
+    <div>
+      Home Page
+    </div>
+  )
+}

src/index.js

@@ -0,0 +1,11 @@
+import { useParams } from "react-router-dom";
+
+export default function UserPage() {
+  const params = useParams();
+
+  return (
+    <div>
+      User <h1>{params.id}</h1>
+    </div>
+  );
+}

src/logo.svg

@@ -0,0 +1,4 @@
+import React from 'react'
+export default function UsersPage() {
+  return <div>Users</div>;
+}