# React Router v7 - 综合参考指南
## 概述
React Router 是一个现代路由库，为 React 应用提供灵活的客户端和服务器端路由。它提供两种主要操作模式：框架模式和数据模式，并通过自动类型生成提供一流的 TypeScript 支持。
## 安装与设置
### 基础安装
bash
npm install react-router
### TypeScript 配置
React Router 为每个路由生成特定类型文件。配置你的 `tsconfig.json`：
{
"include": [".react-router/types/**/*"],
"compilerOptions": {
"rootDirs": [".", "./.react-router/types"]
}
}
将 `.react-router/` 添加到 `.gitignore`：
txt
.react-router/
### 扩展 AppLoadContext
在 `.ts` 或 `.d.ts` 文件中定义应用的上下文类型：
typescript
import "react-router";
declare module "react-router" {
interface AppLoadContext {
// 在此处添加上下文属性
apiClient?: APIClient;
userId?: string;
}
}
## 路由定义模式
### 基础路由配置
路由作为对象传递给 `createBrowserRouter`：
tsx
import { createBrowserRouter } from "react-router";
const router = createBrowserRouter([
{
path: "/",
Component: Root
},
{
path: "/about",
Component: About
},
]);
### 嵌套路由
子路由通过父组件中的 `` 渲染：
tsx
createBrowserRouter([
{
path: "/dashboard",
Component: Dashboard,
children: [
{ index: true, Component: DashboardHome },
{ path: "settings", Component: Settings },
],
},
]);
function Dashboard() {
return (
Dashboard
{/* 渲染子路由 */}
);
}
### 布局路由 (无路径)
创建布局容器而不添加 URL 段：
tsx
createBrowserRouter([
{
// 无路径 - 仅作为布局
Component: MarketingLayout,
children: [
{ index: true, Component: Home },
{ path: "contact", Component: Contact },
],
},
]);
### 索引路由
在路径下定义默认路由：
tsx
createBrowserRouter([
{
path: "/",
Component: Root,
children: [
{ index: true, Component: Home }, // 在 "/" 处渲染
{ path: "about", Component: About },
],
},
]);
### 动态段
使用冒号定义动态参数：
tsx
{
path: "teams/:teamId",
loader: async ({ params }) => {
retur
粤公网安备44030002003366号