React Router

import { Routes, Route, Link, NavLink, Navigate, Outlet } from 'react-router-dom'

// Pages
function Home()    { return <h1>Home Page</h1> }
function About()   { return <h1>About Page</h1> }
function NotFound(){ return <h1>404 — Page Not Found</h1> }

// Layout with nested routes
function Layout() {
    return (
        <div>
            <nav>
                {/* Link — basic navigation */}
                <Link to="/">Home</Link>

                {/* NavLink — adds 'active' class when route matches */}
                <NavLink to="/about"
                    className={({ isActive }) => isActive ? 'nav-active' : ''}>
                    About
                </NavLink>

                <NavLink to="/users">Users</NavLink>
                <NavLink to="/blog">Blog</NavLink>
            </nav>

            {/* Outlet renders the matched child route */}
            <main><Outlet /></main>
        </div>
    )
}

function App() {
    const isLoggedIn = true

    return (
        <Routes>
            {/* Layout route — wraps child routes */}
            <Route path="/" element={<Layout />}>
                <Route index element={<Home />} />          {/* / */}
                <Route path="about" element={<About />} />  {/* /about */}

                {/* URL parameters */}
                <Route path="users" element={<UserList />} />
                <Route path="users/:id" element={<UserDetail />} />

                {/* Nested routes */}
                <Route path="blog" element={<BlogLayout />}>
                    <Route index element={<BlogHome />} />
                    <Route path=":slug" element={<BlogPost />} />
                </Route>

                {/* Protected route */}
                <Route path="dashboard"
                    element={isLoggedIn ? <Dashboard /> : <Navigate to="/login" replace />} />

                {/* 404 */}
                <Route path="*" element={<NotFound />} />
            </Route>

            <Route path="/login" element={<Login />} />
        </Routes>
    )
}

import { useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom'

// useParams — access URL parameters
function UserDetail() {
    const { id } = useParams()  // from path="/users/:id"
    return <h1>User ID: {id}</h1>
}

// useNavigate — programmatic navigation
function LoginForm() {
    const navigate = useNavigate()

    const handleLogin = async () => {
        await login()
        navigate('/dashboard')           // go to dashboard
        navigate(-1)                     // go back
        navigate('/home', { replace: true }) // replace history entry
    }

    return <button onClick={handleLogin}>Login</button>
}

// useLocation — current URL info
function CurrentPage() {
    const location = useLocation()
    // location.pathname = '/users/5'
    // location.search   = '?tab=profile'
    // location.hash     = '#section1'
    // location.state    = { from: '/login' }
    return <p>Current path: {location.pathname}</p>
}

// useSearchParams — query string (?key=value)
function SearchPage() {
    const [searchParams, setSearchParams] = useSearchParams()
    const query = searchParams.get('q') || ''
    const page  = Number(searchParams.get('page')) || 1

    return (
        <div>
            <input
                value={query}
                onChange={e => setSearchParams({ q: e.target.value, page: 1 })}
                placeholder="Search..."
            />
            <p>Searching for: {query}, Page: {page}</p>
        </div>
    )
}