React: Explain React Router and its key concepts

1import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
2
3function App() {
4  return (
5    <BrowserRouter>
6      <nav>
7        <Link to="/">Home</Link> | {" "}
8        <Link to="/about">About</Link> | {" "}
9        <Link to="/users/42">User 42</Link>
10      </nav>
11      <Routes>
12        <Route path="/" element={<Home />} />
13        <Route path="/about" element={<About />} />
14        <Route path="/users/:id" element={<User />} />
15        <Route path="*" element={<NotFound />} />
16      </Routes>
17    </BrowserRouter>
18  );
19}

1import { useParams } from "react-router-dom";
2
3function User() {
4  const { id } = useParams<{ id: string }>();
5  return <div>User profile: {id}</div>;
6}

1<Route path="/dashboard" element={<Dashboard />}>
2  <Route index element={<Overview />} />
3  <Route path="settings" element={<Settings />} />
4  <Route path="analytics" element={<Analytics />} />
5</Route>
6
7// Dashboard layout — renders children routes in <Outlet />
8function Dashboard() {
9  return (
10    <div className="dashboard">
11      <aside>
12        <NavLink to="/dashboard">Overview</NavLink>
13        <NavLink to="/dashboard/settings">Settings</NavLink>
14      </aside>
15      <main>
16        <Outlet /> {/* Renders the nested route component */}
17      </main>
18    </div>
19  );
20}

1import { useNavigate } from "react-router-dom";
2
3function LoginPage() {
4  const navigate = useNavigate();
5
6  const handleLogin = async () => {
7    const success = await login(credentials);
8    if (success) {
9      navigate("/dashboard");
10      // or navigate(-1) to go back
11    }
12  };
13
14  return <button onClick={handleLogin}>Login</button>;
15}

1import { Navigate, Outlet } from "react-router-dom";
2
3function ProtectedRoute() {
4  const { user, loading } = useAuth();
5
6  if (loading) return <Spinner />;
7  if (!user) return <Navigate to="/login" replace />;
8
9  return <Outlet />;
10}
11
12// Usage in route config
13<Route element={<ProtectedRoute />}>
14  <Route path="/dashboard" element={<Dashboard />} />
15  <Route path="/settings" element={<Settings />} />
16</Route>

1import { useSearchParams } from "react-router-dom";
2
3function ProductList() {
4  const [searchParams, setSearchParams] = useSearchParams();
5  const category = searchParams.get("category") || "all";
6
7  return (
8    <div>
9      <button onClick={() => setSearchParams({ category: "electronics" })}>
10        Electronics
11      </button>
12      <p>Category: {category}</p>
13    </div>
14  );
15}