react-router-declarative-mode

React Router 声明式模式

声明式模式是 React Router 最简单的模式，使用 <BrowserRouter>、<Routes> 和 <Route> 实现基本的客户端路由，不包含 loader 或 action 等数据加载功能。

适用场景

• 使用 <BrowserRouter> 进行路由
• 使用 <Routes> 和 <Route> 配置路由
• 使用 <Link>、<NavLink> 或 useNavigate 进行导航
• 使用 useParams 读取 URL 参数
• 使用 useSearchParams 处理搜索参数
• 使用 useLocation 访问 location

参考资料

加载相关参考资料，了解特定 API/概念的详细指南：

参考资料	适用场景
references/routing.md	配置路由、嵌套路由、动态参数
references/navigation.md	链接、NavLink 激活状态、编程式导航
references/url-values.md	读取参数、搜索参数、location

关键模式

以下是最重要的模式。加载相关参考资料以查看完整详情。

基本路由设置

使用 JSX 和 <Routes>、<Route> 配置路由：

import { BrowserRouter, Routes, Route } from "react-router";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="dashboard" element={<Dashboard />}>
          <Route index element={<DashboardHome />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        <Route path="users/:userId" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

NavLink 激活状态

使用 NavLink 实现带激活样式的导航：

import { NavLink } from "react-router";

function Nav() {
  return (
    <nav>
      <NavLink
        to="/"
        end
        className={({ isActive }) => (isActive ? "active" : "")}
      >
        Home
      </NavLink>
      <NavLink
        to="/dashboard"
        className={({ isActive }) => (isActive ? "active" : "")}
      >
        Dashboard
      </NavLink>
    </nav>
  );
}

读取 URL 参数

使用 useParams 读取动态路由片段：

import { useParams } from "react-router";

function User() {
  const { userId } = useParams();
  return <h1>User {userId}</h1>;
}

处理搜索参数

使用 useSearchParams 获取查询字符串的值：

import { useSearchParams } from "react-router";

function SearchResults() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("q");

  return (
    <div>
      <input
        value={query || ""}
        onChange={(e) => setSearchParams({ q: e.target.value })}
      />
      <p>Results for: {query}</p>
    </div>
  );
}

更多文档

如果这些参考资料未涵盖 React Router 的相关内容，可以搜索官方文档：

https://reactrouter.com/docs