routing

app.jsx

import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams, useSearchParams, useLocation } from "react-router-dom";
import './styles.css';

const users = [
  { name: 'Ken', id: 1 },
  { name: 'Favour', id: 2 }
]

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function Contact() {
  return <h2>Contact Page</h2>;
}

function Error() {
  return <h2>404 Page, Please Try Again</h2>;
}

function Users() {
  const users = [
    {name: 'Ken', id: 1},
    {name: 'Favour', id: 2}
  ]

  const route = useLocation();
  console.log(route.pathname)

  
  return (
    <>
      <h2>Users</h2>
      <nav>
        <Link to="/users/create">Create</Link>{` `}
        <Link to="/users/search">Search</Link>
      </nav>
      <section>
        <ul>
          {users.map((user) => {
            const matched = `/users/${user.id}` === route.pathname;
            console.log(matched)
            return <li key={user.id}><Link className={matched ? 'isActive' : ''} to={`/users/${user.id}`}>{user.name}</Link></li>}
          )}
        </ul>
      </section>
      <Outlet />
    </>
  )
}

// useLocation, useSearchParams
function User() {
  const params = useParams()
  const originalUser = users.find(user => user.id == params.id)
  // fetch id from api or database
  return (
    <>
      <h2>User {params.id}</h2>
      <h2>Name: {originalUser.name}</h2>
      <nav>
        <Link to={`/users/${params.id}/update`}>update</Link>{` `}
        <Link to={`/users/${params.id}/delete`}>delete</Link>{` `}
      </nav>
    </>
    );
}

function UserSearch() {
  // searchParams: read-only URLSearchParams object
  // setSearchParams: function to update the URL
  let [searchParams, setSearchParams] = useSearchParams();

  // 1. Reading a parameter
  const query = searchParams.get("y") || "";

  const handleChange = (event) => {
    const term = event.target.value;
    if (term) {
      // 2. Updating the URL to ?q=newvalue
      setSearchParams({ y: term });
    } else {
      // 3. Removing the parameter if input is empty
      setSearchParams({});
    }
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="Search..."
      />
      <p>Current Search: {query}</p>
    </div>
  );
}

function UserUpdate() {
  const params = useParams()
  return <h2>Update the user {params.id}</h2>
}

function UserDelete() {
  return <h2>Delete the user {params.id}</h2>
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> | <Link to="/contact">Contact</Link> | <Link to="/users">Users</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/users" element={<Users />} >
          <Route path="/users/:id" element={<User />} />
          <Route path="/users/search" element={<UserSearch />} />
          <Route path="/users/create" element={<User />} />
          <Route path="/users/:id/update" element={<User />} />
          <Route path="/users/:id/delete" element={<User />} />
        </Route>
        <Route path="*" element={<Error />} />
      </Routes>
    </Router>
  );
}

export default App;

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.isActive {
  color: red !important;
}