React Router v6+

npm install react-router

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router'
import App from './App.jsx'
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
)

import { Routes, Route } from 'react-router'
import Layout from './Layout.jsx'
import Home from './pages/Home.jsx'
import Posts from './pages/Posts.jsx'
import PostDetail from './pages/PostDetail.jsx'
import NotFound from './pages/NotFound.jsx'
 
export default function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="posts" element={<Posts />} />
        <Route path="posts/:id" element={<PostDetail />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  )
}

import { NavLink, Outlet } from 'react-router'
 
export default function Layout() {
  return (
    <div className="app">
      <header>
        <nav>
          <NavLink to="/" end>Home</NavLink>
          <NavLink to="/posts">Posts</NavLink>
        </nav>
      </header>
 
      <main>
        <Outlet />
      </main>
    </div>
  )
}

import { Link, NavLink } from 'react-router'
 
<Link to="/posts/42">Read post 42</Link>
 
<NavLink
  to="/posts"
  className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
>
  Posts
</NavLink>

import { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router'
 
export default function PostDetail() {
  const { id } = useParams()
  const [post, setPost] = useState(null)
  const [status, setStatus] = useState('loading')
 
  useEffect(() => {
    setStatus('loading')
    const controller = new AbortController()
 
    async function load() {
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
          signal: controller.signal,
        })
        if (!response.ok) throw new Error(`HTTP ${response.status}`)
        setPost(await response.json())
        setStatus('ready')
      } catch (error) {
        if (error.name !== 'AbortError') setStatus('error')
      }
    }
 
    load()
    return () => controller.abort()
  }, [id]) // re-fetch when the URL id changes
 
  if (status === 'loading') return <p>Loading…</p>
  if (status === 'error') return <p>Could not load this post.</p>
 
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <Link to="/posts">Back to all posts</Link>
    </article>
  )
}

import { useSearchParams } from 'react-router'
 
export default function Posts() {
  const [searchParams, setSearchParams] = useSearchParams()
  const page = Number(searchParams.get('page') ?? 1)
  const query = searchParams.get('q') ?? ''
 
  function setQuery(next) {
    setSearchParams((current) => {
      const params = new URLSearchParams(current)
      if (next) params.set('q', next)
      else params.delete('q')
      params.set('page', '1') // changing a filter resets pagination
      return params
    })
  }
 
  return (
    <section>
      <input value={query} onChange={(event) => setQuery(event.target.value)} />
      <p>Page {page}</p>
      <button onClick={() => setSearchParams({ page: String(page + 1) })}>
        Next page
      </button>
    </section>
  )
}

import { useNavigate } from 'react-router'
 
export default function NewPostForm() {
  const navigate = useNavigate()
 
  async function handleSubmit(event) {
    event.preventDefault()
    // ...create the post...
    navigate('/posts/42')      // push a new entry
    // navigate('/posts', { replace: true })  // replace the current entry
  }
 
  return <form onSubmit={handleSubmit}>{/* ... */}</form>
}

// AuthContext.jsx
import { createContext, useContext, useMemo, useState } from 'react'
 
const AuthContext = createContext(null)
 
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null)
 
  const value = useMemo(
    () => ({
      user,
      login: (name) => setUser({ name }),
      logout: () => setUser(null),
    }),
    [user]
  )
 
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}
 
export function useAuth() {
  const context = useContext(AuthContext)
  if (!context) throw new Error('useAuth must be used inside AuthProvider')
  return context
}

import { Navigate, useLocation } from 'react-router'
import { useAuth } from './AuthContext.jsx'
 
export function RequireAuth({ children }) {
  const { user } = useAuth()
  const location = useLocation()
 
  if (!user) {
    // Remember the attempted URL so login can send the user back
    return <Navigate to="/login" state={{ from: location }} replace />
  }
 
  return children
}

<Route
  path="dashboard"
  element={
    <RequireAuth>
      <Dashboard />
    </RequireAuth>
  }
/>

import { createBrowserRouter, RouterProvider, useLoaderData } from 'react-router'
 
async function postsLoader() {
  const response = await fetch('/api/posts')
  if (!response.ok) throw new Error('Failed to load posts')
  return response.json()
}
 
function Posts() {
  const posts = useLoaderData()
  return <ul>{posts.map((post) => <li key={post.id}>{post.title}</li>)}</ul>
}
 
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <Home /> },
      { path: 'posts', element: <Posts />, loader: postsLoader },
    ],
  },
])
 
createRoot(document.getElementById('root')).render(<RouterProvider router={router} />)