import { BrowserRouter } from "react-router";

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";

const router = createBrowserRouter([
  /* route objects */
]);

ReactDOM.createRoot(root).render(
  <RouterProvider router={router} />
);

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

// 1. 从 react-router-dom 导入 BrowserRouter
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

// 1. 导入路由组件和我们的页面组件
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Products from './pages/Products'

function App() {
  return (
    <>
      {/* 在这里可以放置全局共享的导航栏等组件 */}
      <nav>{/* ...导航链接... */}</nav>

      {/* 2. Routes 组件包裹所有路由规则 */}
      <Routes>
        {/* 3. 每条 Route 规则定义一个页面 */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </>
  )
}

export default App

const Home = () => {
  return <h2>首页</h2>;
};
export default Home;

const About = () => {
  return <h2>关于我们</h2>;
};
export default About;

const Products = () => {
  return <h2>产品列表</h2>;
};
export default Products;

// 1. 导入路由组件和我们的页面组件
import { Routes, Route, NavLink } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Products from "./pages/Products";

function App() {
  return (
    <>
      {/* 在这里可以放置全局共享的导航栏等组件 */}
      <nav className="flex gap-4 p-4">
        {/* 使用 NavLink 替代普通的 a 标签 */}
        <NavLink to="/">首页</NavLink>
        <NavLink to="/products">产品</NavLink>
        <NavLink to="/about">关于我们</NavLink>
      </nav>

      {/* 2. Routes 组件包裹所有路由规则 */}
      <main className="p-4">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/products" element={<Products />} />
        </Routes>
      </main>
    </>
  );
}

export default App;

<NavLink
  to="/messages"
  className={({ isActive, isPending }) => // isPending 仅在数据模式下可用
    isActive ? "text-red-500 font-bold" : "text-blue-500"
  }
>
  Messages
</NavLink>

import { NavLink, Outlet } from "react-router-dom";

const AppLayout = () => {
  return (
    <div>
      <header>
        <nav className="flex gap-4 p-4 border-b">
          <NavLink to="/">首页</NavLink>
          <NavLink to="/products">产品</NavLink>
          <NavLink to="/about">关于我们</NavLink>
        </nav>
      </header>
      <main className="p-4">
        {/* 关键：这里会根据当前的 URL，渲染匹配到的子路由组件 */}
        <Outlet />
      </main>
      <footer className="p-4 border-t mt-4">
        <p>© 2025 Prorise. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default AppLayout;

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

// 导入布局和页面
import AppLayout from './components/AppLayout'
import Home from './pages/Home'
import About from './pages/About'
import Products from './pages/Products'

function App() {
  return (
    <Routes>
      {/* 创建一个父路由，路径为根路径 "/"。
        它的 element 是我们的共享布局 AppLayout。
      */}
      <Route path="/" element={<AppLayout />}>
        {/* 这里是嵌套的子路由。
          它们的 path 是相对于父路由的。
          当 URL 匹配时，它们对应的 element 会被渲染到父路由 AppLayout 的 <Outlet /> 中。
          "index" 属性表示这是父路由下的默认子路由。
        */}
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="products" element={<Products />} />
      </Route>
    </Routes>
  )
}

export default App

import { createBrowserRouter } from 'react-router-dom';

// 导入所有布局和页面组件
import AppLayout from '../components/AppLayout';
import Home from '../pages/Home';
import About from '../pages/About';
import Products from '../pages/Products';
import ProductDetail from '../pages/ProductDetail';

// 使用 createBrowserRouter 创建路由实例
const router = createBrowserRouter([
  {
    // 父路由，使用 AppLayout 作为布局
    path: '/',
    element: <AppLayout />,
    // children 数组定义了所有嵌套在该布局下的子路由
    children: [
      {
        index: true, // index: true 表示这是默认子路由
        element: <Home />,
      },
      {
        path: 'about',
        element: <About />,
      },
      {
        path: 'products',
        element: <Products />,
      },
      {
        // 核心：在这里定义动态路由
        path: 'products/:productId',
        element: <ProductDetail />,
      },
    ],
  },
]);

export default router;

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider } from 'react-router-dom';

import { ConfigProvider, App as AntdApp } from 'antd';
import zhCN from 'antd/locale/zh_CN';
// 1. 导入我们在 router/index.tsx 中创建的路由配置实例
import router from './router';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#00b96b',
        },
      }}
    >
      <AntdApp>
        {/* 2. 使用 RouterProvider 组件并传入 router 实例
            这是 React Router v6.4+ 推荐的路由配置方式
            RouterProvider 会根据当前 URL 自动渲染匹配的路由组件
            相比传统的 BrowserRouter + Routes 方式，它支持更多高级特性如数据加载、错误边界等
        */}
        <RouterProvider router={router} />
      </AntdApp>
    </ConfigProvider>
  </React.StrictMode>
);

import { useParams } from "react-router-dom";
import { Card, Descriptions, Alert } from "antd";

// 1.模拟产品数据，通过Record即可定义一个键类型上应该会有怎样的属性
const mockProducts: Record<
  string,
  { name: string; category: string; price: string }
> = {
  "1": { name: "高性能笔记本电脑", category: "电子产品", price: "¥8999" },
  "2": { name: "人体工学办公椅", category: "家具", price: "¥2499" },
};

const ProductDetail = () => {
  const { productId } = useParams<{ productId: string }>(); // 直接解构并提供类型提示

  // 2.直接访问，使用 Record 类型定义后不需要类型断言
  const product = productId ? mockProducts[productId] : undefined;

  if (!product) {
    return <Alert message="产品不存在" type="error" />;
  }

  return (
    <Card title={`产品详情：${product.name}`}>
      <Descriptions bordered>
        {/* 我们可以在模板对象中消费productid，他会精确的匹配到URL中的路径数据 */}
        <Descriptions.Item label="产品ID">{productId}</Descriptions.Item>
        <Descriptions.Item label="名称">{product.name}</Descriptions.Item>
        <Descriptions.Item label="分类">{product.category}</Descriptions.Item>
        <Descriptions.Item label="价格">{product.price}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
};

export default ProductDetail;

import { Link, useSearchParams } from "react-router-dom";
import { List, Radio, Card, type RadioChangeEvent } from "antd";

const allProducts = [
  { id: "1", name: "高性能笔记本电脑", price: 8999 },
  { id: "2", name: "人体工学办公椅", price: 2499 },
  { id: "3", name: "机械键盘", price: 799 },
];

const Products = () => {
  // 1. 调用 useSearchParams 获取 searchParams 和 setSearchParams
  const [searchParams, setSearchParams] = useSearchParams();
  // 2. 读取 'sort' 参数，若不存在则默认为 'default'
  const sortOrder = searchParams.get("sort") || "default";

  // 3. 根据排序参数处理数据
  const sortedProducts = [...allProducts].sort((a, b) => {
    if (sortOrder === "default") return 0;
    return sortOrder === "price-asc" ? a.price - b.price : b.price - a.price;
  });

  const handleSortChange = (e: RadioChangeEvent) => {
    const newSortOrder = e.target.value;
    // 4. 调用 setSearchParams 更新 URL 查询字符串，这会触发页面刷新
    setSearchParams({ sort: newSortOrder });
  };

  return (
    <Card title="产品列表">
      <div className="mb-4">
        <Radio.Group onChange={handleSortChange} value={sortOrder}>
          <Radio.Button value="default">默认排序</Radio.Button>
          <Radio.Button value="price-asc">价格升序</Radio.Button>
          <Radio.Button value="price-desc">价格降序</Radio.Button>
        </Radio.Group>
      </div>

      <List
        bordered
        dataSource={sortedProducts}
        renderItem={(item) => (
          <List.Item>
            {/* 5.列表项链接到我们刚刚创建的动态路由 */}
            <Link to={`/products/${item.id}`}>{item.name}</Link> - ¥{item.price}
          </List.Item>
        )}
      />
    </Card>
  );
};

export default Products;

import { useParams, useNavigate } from 'react-router-dom';
import { Card, Descriptions, Alert, Button, Space } from 'antd';

// ... mockProducts 定义 ...

const ProductDetail = () => {
  const navigate = useNavigate(); // 获取 navigate 函数
  const { productId } = useParams<{ productId: string }>();
  const product = productId ? mockProducts[productId] : undefined;

  if (!product) {
    // ...
  }
  
  return (
    <Card 
      title={`产品详情：${product.name}`}
      extra={
        <Space>
          <Button onClick={() => navigate('/products')}>返回列表</Button>
          <Button onClick={() => navigate(-1)}>后退</Button>
        </Space>
      }
    >
      <Descriptions bordered>
        <Descriptions.Item label="产品ID">{productId}</Descriptions.Item>
        <Descriptions.Item label="名称">{product.name}</Descriptions.Item>
        <Descriptions.Item label="分类">{product.category}</Descriptions.Item>
        <Descriptions.Item label="价格">{product.price}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
};

export default ProductDetail;

import { Outlet, NavLink } from 'react-router-dom';
import { Layout, Menu } from 'antd';

const { Sider, Content } = Layout;

// 模拟侧边栏导航项
const menuItems = [
  { key: '/dashboard', label: <NavLink to="/dashboard">主页</NavLink> },
  { key: '/dashboard/orders', label: <NavLink to="/dashboard/orders">我的订单</NavLink> },
];

const DashboardLayout = () => {
  return (
    <Layout style={{ minHeight: 'calc(100vh - 134px)' /* 减去全局头尾大致高度 */ }}>
      <Sider width={200}>
        <Menu
          mode="inline"
          defaultSelectedKeys={['/dashboard']}
          style={{ height: '100%', borderRight: 0 }}
          items={menuItems}
        />
      </Sider>
      <Layout style={{ padding: '24px' }}>
        <Content>
          {/* 关键：这是用户中心内部的 Outlet，用于渲染 Profile, Orders 等子页面 */}
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default DashboardLayout;

import { Card } from 'antd';

const Orders = () => {
  return (
    <Card title="我的订单">
      <p>这里是您的订单列表。</p>
    </Card>
  );
};

export default Orders;

// ... 其他 imports
import DashboardLayout from '../pages/dashboard/DashboardLayout';
import Orders from '../pages/dashboard/Orders';

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      // ... Home, About, Products 路由保持不变
      // 新增：用户中心的路由配置
      {
        path: 'dashboard',
        element: <DashboardLayout />, // 使用新的布局
        children: [
          // 这里定义了 /dashboard 的子路由
          {
            path: 'orders', // -> 匹配 /dashboard/orders
            element: <Orders />,
          },
        ],
      },
    ],
  },
]);

export default router;

import { Card } from 'antd';

const DashboardHome = () => {
  return (
    <Card title="欢迎回到您的用户中心">
      <p>请在左侧选择一个菜单项以继续。</p>
    </Card>
  );
};

export default DashboardHome;

// ... 其他 imports
import DashboardHome from '../pages/dashboard/DashboardHome';

// ...
      {
        path: 'dashboard',
        element: <DashboardLayout />,
        children: [
          // 新增：索引路由
          {
            index: true, // 当 URL 为 /dashboard 时，渲染此组件
            element: <DashboardHome />,
          },
          {
            path: 'orders',
            element: <Orders />,
          },
        ],
      },
// ...

import { Button, Result } from 'antd';
import { useNavigate } from 'react-router-dom';

const NotFound = () => {
  const navigate = useNavigate();
  return (
    <Result
      status="404"
      title="404"
      subTitle="抱歉，您访问的页面不存在。"
      extra={
        <Button type="primary" onClick={() => navigate('/')}>
          返回首页
        </Button>
      }
    />
  );
};

export default NotFound;

// ... 其他 imports
import NotFound from '../pages/NotFound';

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      // ... 所有正常页面的路由配置
    ],
  },
  // 在所有主要路由规则之后，添加一个顶级的捕获所有路由
  // 注意：它不应该嵌套在 AppLayout 内，因为它是一个独立的错误页
  {
    path: '*',
    element: <NotFound />,
  },
]);

export default router;

// ...
// 确保已导入 ProductDetail 组件
import ProductDetail from '../pages/ProductDetail';

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      // ... 其他路由
      {
        // 暂时只定义 path 和 element
        path: 'products/:productId',
        element: <ProductDetail />,
      },
    ],
  },
  // ...
]);

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Card, Descriptions, Spin, Alert } from 'antd';

// 为API返回的数据定义类型
interface Product {
  id: number;
  title: string;
  category: string;
  price: number;
  description: string;
}

const ProductDetail = () => {
  const { productId } = useParams<{ productId: string }>();

  // 1. 手动定义三个状态：数据、加载、错误
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 2. 在 Effect 中定义并执行异步函数
    const fetchProduct = async () => {
      // 每次 productId 变化时，重置状态
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(`https://dummyjson.com/products/${productId}`);
        // 必须手动检查响应是否成功
        if (!response.ok) {
          throw new Error(`产品信息获取失败，状态码: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    if (productId) {
      fetchProduct();
    }
  }, [productId]); // 依赖 productId，当它变化时重新执行

  // 3. 根据状态进行条件渲染
  if (loading) {
    return <div className="text-center p-8"><Spin tip="产品数据加载中..." size="large" /></div>;
  }

  if (error) {
    return <Alert message="加载错误" description={error} type="error" showIcon />;
  }

  if (!product) {
    return <Alert message="未找到产品数据。" type="warning" />;
  }

  return (
    <Card title={product.title}>
      <Descriptions bordered layout="vertical">
        <Descriptions.Item label="产品ID">{product.id}</Descriptions.Item>
        <Descriptions.Item label="分类">{product.category}</Descriptions.Item>
        <Descriptions.Item label="价格">${product.price}</Descriptions.Item>
        <Descriptions.Item label="描述" span={3}>{product.description}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
};

export default ProductDetail;

// ...
import ProductDetail from '../pages/ProductDetail';

// 1. 将数据获取逻辑定义为 loader
export const productDetailLoader = async ({ params }: { params: any }) => {
  const { productId } = params;
  const response = await fetch(`https://dummyjson.com/products/${productId}`);

  // 2. 如果请求失败，可以直接抛出一个 Response
  //    React Router 的错误处理机制会自动捕获它
  if (!response.ok) {
    throw new Response("Product Not Found", { status: 404, statusText: "未找到产品" });
  }

  // 3. 成功后，直接返回解析后的数据
  return response.json();
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      // ...
      {
        path: 'products/:productId',
        element: <ProductDetail />,
        // 4. 将 loader 关联到路由
        loader: productDetailLoader,
      },
    ],
  },
  // ...
]);

export default router;

import { useLoaderData } from 'react-router-dom';
import { Card, Descriptions } from 'antd';
import { type productDetailLoader } from '../router'; // 导入 loader 以获取类型

// 使用 TypeScript 的高级类型推断，自动获得 loader 返回的数据类型
type Product = Awaited<ReturnType<typeof productDetailLoader>>;

const ProductDetail = () => {
  // 奇迹发生的地方：
  // 1. 没有 useState
  // 2. 没有 useEffect
  // 3. 没有 loading 和 error 状态
  // 4. 只需一行代码，数据已在组件渲染前准备就绪
  const product = useLoaderData() as Product;

  return (
    <Card title={product.title}>
      <Descriptions bordered layout="vertical">
        <Descriptions.Item label="产品ID">{product.id}</Descriptions.Item>
        <Descriptions.Item label="分类">{product.category}</Descriptions.Item>
        <Descriptions.Item label="价格">${product.price}</Descriptions.Item>
        <Descriptions.Item label="描述" span={3}>{product.description}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
};

export default ProductDetail;

// 这是一个不使用 action 的"传统"表单组件
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Input, Button, Card, App } from "antd";

const TraditionalNewProduct = () => {
  const navigate = useNavigate();
  const { message } = App.useApp(); // 使用 useApp hook 获取 message API
  const [submitting, setSubmitting] = useState(false);
  const [formErrors, setFormErrors] = useState<{ title?: string }>({});

  const handleSubmit = async (values: { title: string }) => {
    // 1. 手动处理提交状态
    setSubmitting(true);
    setFormErrors({});

    console.log("表单提交的值:", values);

    // 2. 客户端表单验证
    if (!values.title) {
      setFormErrors({ title: "产品标题不能为空" });
      setSubmitting(false);
      return;
    }

    // 3. 手动调用 fetch/axios 发送请求
    try {
      const response = await fetch("https://dummyjson.com/products/add", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      });

      if (!response.ok) throw new Error("提交失败");

      const newProduct = await response.json();
      message.success(`产品 "${newProduct.title}" 创建成功!`);

      // 4. 手动处理成功后的跳转
      navigate("/products");
    } catch (error) {
      message.error("创建产品失败，请重试");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Card title="创建新产品 (传统方式)">
      {/* antd 的 Form 组件帮助我们管理表单状态 */}
      {/* 
        注意：antd 的 Form.Item 需要配合 name 属性才能收集表单数据
        Input 组件的 name 属性在这里不起作用
      */}
      <Form onFinish={handleSubmit}>
        <Form.Item
          label="产品标题"
          name="title"
          validateStatus={formErrors.title ? "error" : ""}
          help={formErrors.title}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={submitting}>
            创建
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default TraditionalNewProduct;

import { createBrowserRouter, redirect } from 'react-router-dom';
// ...
import NewProduct from '../pages/NewProduct'; // 导入我们将要创建的新组件

// 1. 定义 action 函数，它和 loader 一样，在路由配置中
//    它接收一个包含 request 对象的参数
export const createProductAction = async ({ request }: { request: Request }) => {
  // 2. request.formData() 可以方便地解析出表单数据
  const formData = await request.formData();
  const title = formData.get('title') as string;

  // 3. 在 action 中执行服务端/API 逻辑 (包括验证)
  if (!title || title.trim().length < 3) {
    // 如果验证失败，返回一个包含错误信息的对象
    // 这个对象可以被组件中的 useActionData() 捕获
    return { error: '产品标题必须至少包含3个字符' };
  }

  // 模拟 API 调用
  await fetch('https://dummyjson.com/products/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title }),
  });
  
  // 4. 操作成功后，使用 redirect() 工具函数进行页面跳转
  //    这比在组件中使用 useNavigate() 更优雅
  return redirect('/products');
};


const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      // ...
      {
        path: 'products/new',
        element: <NewProduct />,
        action: createProductAction, // 5. 将 action 关联到路由
      },
      // ...
    ],
  },
  // ...
]);

export default router;

import { Form as RouterForm, useActionData } from "react-router-dom";
import { Form as AntdForm, Input, Button, Card } from "antd";

const NewProduct = () => {
  const actionData = useActionData() as { error: string } | undefined;

  return (
    <Card title="创建新产品 (Action 模式)">
      {/* 
        问题所在：React Router 的 Form 组件会直接收集原生表单元素的数据
        而 Ant Design 的 Form.Item 只是一个装饰器组件，不是真正的表单元素
        Input 组件必须有 name 属性才能被收集
      */}
      <RouterForm method="post">
        <AntdForm.Item
          label="产品标题"
          validateStatus={actionData?.error ? "error" : ""}
          help={actionData?.error}
          // 这个 name 对 RouterForm 无效，它只用于 AntdForm 的数据管理
        >
          {/* ！！！！！必须在 Input 上添加 name 属性，RouterForm 才能收集到数据 */}
          <Input name="title" placeholder="请输入至少3个字符" />
        </AntdForm.Item>
        <AntdForm.Item>
          {/* 这个 Button 只需要是 type="submit" */}
          <Button type="primary" htmlType="submit">
            创建
          </Button>
        </AntdForm.Item>
      </RouterForm>
    </Card>
  );
};

export default NewProduct;

import { useLoaderData, type LoaderFunctionArgs } from 'react-router-dom'; // 导入 LoaderFunctionArgs 类型
import { Card, Descriptions } from 'antd';

// 1. 将 loader 函数从 router/index.tsx 剪切到这里
export const loader = async ({ params }: LoaderFunctionArgs) => {
  const { productId } = params;
  const response = await fetch(`https://dummyjson.com/products/${productId}`);
  if (!response.ok) {
    throw new Response("Product Not Found", { status: 404, statusText: "未找到产品" });
  }
  return response.json();
};

// 使用 Awaited 和 ReturnType 来自动推断 loader 的返回类型
type Product = Awaited<ReturnType<typeof loader>>;

const ProductDetail = () => {
  const product = useLoaderData() as Product;

  return (
    <Card title={product.title}>
      {/* ... Card 内容不变 ... */}
    </Card>
  );
};

export default ProductDetail;

import { Form as RouterForm, useActionData, redirect, type ActionFunctionArgs } from 'react-router-dom';
import { Form as AntdForm, Input, Button, Card } from 'antd';

// 1. 将 action 函数从 router/index.tsx 剪切到这里
export const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  const title = formData.get('title') as string;

  if (!title || title.trim().length < 3) {
    return { error: '产品标题必须至少包含3个字符' };
  }

  await fetch('https://dummyjson.com/products/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title }),
  });
  
  return redirect('/products');
};

const NewProduct = () => {
  const actionData = useActionData() as { error: string } | undefined;

  return (
    <Card title="创建新产品 (Action 模式)">
      {/* ... Form 内容不变 ... */}
    </Card>
  );
};

export default NewProduct;

import { createBrowserRouter } from 'react-router-dom';

// 导入布局和页面
import AppLayout from '../components/AppLayout';
import Home from '../pages/Home';
import Products from '../pages/Products';
import NewProduct, { action as createProductAction } from '../pages/NewProduct'; // 1. 从页面导入 action
import ProductDetail, { loader as productDetailLoader } from '../pages/ProductDetail'; // 2. 从页面导入 loader
// ... 其他 imports

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      // ...
      {
        path: 'products/new',
        element: <NewProduct />,
        action: createProductAction, // 3. 引用导入的 action
      },
      {
        path: 'products/:productId',
        element: <ProductDetail />,
        loader: productDetailLoader, // 4. 引用导入的 loader
      },
      // ...
    ],
  },
  // ...
]);

export default router;

import { Outlet, NavLink } from "react-router-dom";
import { Layout, Menu, Spin } from "antd";
import { useNavigation } from "react-router-dom"; // 1. 导入 useNavigation

const { Header, Content, Footer } = Layout;

const AppLayout = () => {
  const navigation = useNavigation(); // 2. 调用 hook 获取导航状态
  const isLoading = navigation.state !== "idle"; // 3. 判断是否处于加载/提交状态

  return (
    <Layout>
      <Header>
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["1"]}>
          <Menu.Item key="1">
            <NavLink to="/">首页</NavLink>
          </Menu.Item>
          <Menu.Item key="2">
            <NavLink to="/products">产品</NavLink>
          </Menu.Item>
          <Menu.Item key="3">
            <NavLink to="/about">关于我们</NavLink>
          </Menu.Item>
          <Menu.Item key="4">
            <NavLink to="/products/1">产品详情</NavLink>
          </Menu.Item>
          <Menu.Item key="5">
            <NavLink to="/dashboard">用户中心</NavLink>
          </Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: "24px", minHeight: 280 }}>
        {/* 4. 如果正在加载，显示全局 loading 效果 */}
        <Spin spinning={isLoading} size="large" tip="加载中...">
          {/* 关键：这里会根据当前的 URL，渲染匹配到的子路由组件 */}
          <Outlet />
        </Spin>
      </Content>
      <Footer style={{ textAlign: "center" }}>
        © 2025 Prorise. All rights reserved.
      </Footer>
    </Layout>
  );
};

export default AppLayout;

import { createBrowserRouter } from 'react-router-dom';
import { subscribeAction } from '../actions/subscribe'; // 1. 从专用模块导入 action

// ... 其他路由和 loader/action 的导入

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      // ... 所有的页面路由
    ],
  },
  // 2. 将资源路由作为顶级路由进行注册
  {
    path: '/subscribe',
    action: subscribeAction, // 3. 关联导入的 action
  },
  {
    path: '*',
    element: <NotFound />,
  },
]);

export default router;