React Router v6 的核心概念和常用 API？

import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="/dashboard/*" element={<Dashboard />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  )
}

// 声明式导航
<Link to="/about">About</Link>
<NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
  About
</NavLink>

// 编程式导航
function Component() {
  const navigate = useNavigate()
  
  navigate('/about')
  navigate(-1)        // 后退
  navigate('/users/1', { replace: true })  // 替换历史
}

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

function UserDetail() {
  const { id } = useParams()  // /users/:id → { id: '123' }
  const [searchParams] = useSearchParams()  // ?name=Tom → { name: 'Tom' }
  const location = useLocation()  // { pathname, search, hash }
  
  return <div>User {id}</div>
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route index element={<DashboardHome />} />
          <Route path="settings" element={<Settings />} />
          <Route path="analytics" element={<Analytics />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

function Dashboard() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Home</Link>
        <Link to="/dashboard/settings">Settings</Link>
      </nav>
      <Outlet /> {/* 子路由渲染在这里 */}
    </div>
  )
}

function ProtectedRoute({ children }) {
  const { user } = useAuth()
  if (!user) return <Navigate to="/login" replace />
  return children
}

<Route path="/admin" element={
  <ProtectedRoute><Admin /></ProtectedRoute>
} />

import { lazy, Suspense } from 'react'

const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))

<Routes>
  <Route path="/" element={
    <Suspense fallback={<Loader />}><Home /></Suspense>
  } />
</Routes>

// useLoaderData（React Router 6.4+ 数据加载）
const data = useLoaderData()

// useOutlet 获取当前 outlet
const outlet = useOutlet()

// useMatch 匹配当前路径
const match = useMatch('/users/:id')