// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

function App() {
  const name = 'React';
  const age = 18;
  const isLogin = true;
  
  return (
    <div className="app">
      {/* 1. 变量 */}
      <h1>Hello {name}</h1>
      
      {/* 2. 表达式 */}
      <p>明年 {age + 1} 岁</p>
      
      {/* 3. 函数调用 */}
      <p>{getName()}</p>
      
      {/* 4. 条件渲染 - 逻辑与 */}
      {isLogin && <span>已登录</span>}
      
      {/* 5. 条件渲染 - 三元运算符 */}
      {isLogin ? <span>欢迎回来</span> : <span>请登录</span>}
      
      {/* 6. 样式对象 */}
      <div style={{ color: 'red', fontSize: '20px' }}>
        红色文字
      </div>
    </div>
  );
}

function UserList() {
  const users = [
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四', age: 25 },
    { id: 3, name: '王五', age: 30 },
  ];
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} - {user.age}岁
        </li>
      ))}
    </ul>
  );
}

function EventDemo() {
  // 基础事件处理
  const handleClick = (e) => {
    console.log('点击了', e);
  };
  
  // 传递参数
  const handleDelete = (id, e) => {
    console.log('删除', id, e);
  };
  
  // 阻止默认行为
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交表单');
  };
  
  return (
    <div>
      <button onClick={handleClick}>点击</button>
      <button onClick={(e) => handleDelete(123, e)}>删除</button>
      <form onSubmit={handleSubmit}>
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

import { useState } from 'react';

function Counter() {
  // [状态值, 更新函数] = useState(初始值)
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>重置</button>
    </div>
  );
}

// ❌ 错误：直接修改 state
const [user, setUser] = useState({ name: 'Jack' });
user.name = 'Tom'; // 直接修改原对象，React 检测不到变化，不会触发重新渲染

// ✅ 正确：创建新对象
setUser({ ...user, name: 'Tom' }); // 使用展开运算符创建新对象，React 能检测到变化

// ❌ 错误：直接修改数组
const [list, setList] = useState([1, 2, 3]);
list.push(4); // 直接修改原数组，不会触发重新渲染

// ✅ 正确：创建新数组
setList([...list, 4]); // 使用展开运算符创建新数组，包含原数组所有元素 + 新元素

// 当初始值需要复杂计算时，使用函数形式
// 这个函数只在组件首次渲染时执行一次，避免每次渲染都重新计算
const [state, setState] = useState(() => {
  // 假设这是一个耗时的计算
  const initialValue = expensiveComputation();
  return initialValue;
});

import { useEffect, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  // 1. 每次渲染后都执行（没有依赖数组）
  useEffect(() => {
    console.log('组件渲染了');
    // 这个 effect 会在每次组件渲染后执行
  });
  
  // 2. 仅在挂载时执行一次（空依赖数组 []）
  // 相当于类组件的 componentDidMount
  useEffect(() => {
    console.log('组件挂载了');
    
    // 清理函数：在组件卸载时执行
    // 相当于类组件的 componentWillUnmount
    return () => {
      console.log('组件卸载了');
    };
  }, []); // 空数组表示不依赖任何值，只执行一次
  
  // 3. 仅在 count 变化时执行
  // 相当于类组件的 componentDidUpdate，但只监听特定值
  useEffect(() => {
    console.log('count 变化了：', count);
    // 只有当 count 的值改变时，这个 effect 才会重新执行
  }, [count]); // 依赖数组包含 count，count 变化时执行
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // 为什么要定义 async 函数？
    // 因为 useEffect 的回调函数不能直接是 async 函数
    const fetchUser = async () => {
      try {
        setLoading(true);
        setError(null);
        
        // 发送请求
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        
        // 更新状态
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    
    fetchUser();
  }, [userId]); // 当 userId 变化时，重新获取数据
  
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;
  if (!user) return <div>用户不存在</div>;
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    // 建立 WebSocket 连接
    const socket = new WebSocket(`ws://localhost:3000/chat/${roomId}`);
    
    // 监听消息
    socket.onmessage = (event) => {
      const newMessage = JSON.parse(event.data);
      setMessages(prev => [...prev, newMessage]);
    };
    
    // 清理函数：组件卸载或 roomId 变化时执行
    // 非常重要！如果不清理，会导致内存泄漏
    return () => {
      console.log('关闭连接');
      socket.close(); // 关闭 WebSocket 连接
    };
  }, [roomId]); // roomId 变化时，关闭旧连接，建立新连接
  
  return (
    <div>
      <h2>聊天室 {roomId}</h2>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg.text}</li>
        ))}
      </ul>
    </div>
  );
}

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  
  useEffect(() => {
    // 只有在运行状态才创建定时器
    if (!isRunning) return;
    
    // 创建定时器，每秒执行一次
    const timer = setInterval(() => {
      // 使用函数式更新，确保获取最新的 seconds 值
      setSeconds(prev => prev + 1);
    }, 1000);
    
    // 清理函数：停止或组件卸载时清除定时器
    // 如果不清理，定时器会一直运行，导致内存泄漏
    return () => {
      console.log('清除定时器');
      clearInterval(timer);
    };
  }, [isRunning]); // isRunning 变化时，重新创建或清除定时器
  
  return (
    <div>
      <p>已运行：{seconds} 秒</p>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? '暂停' : '开始'}
      </button>
      <button onClick={() => setSeconds(0)}>重置</button>
    </div>
  );
}

function AutoFocusInput() {
  const [value, setValue] = useState('');
  
  useEffect(() => {
    // 组件挂载后，自动聚焦到输入框
    const input = document.getElementById('my-input');
    input.focus();
  }, []); // 空数组表示只在挂载时执行一次
  
  return (
    <input
      id="my-input"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

function WindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  
  useEffect(() => {
    // 定义事件处理函数
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    
    // 添加事件监听
    window.addEventListener('resize', handleResize);
    
    // 清理函数：移除事件监听
    // 如果不移除，每次组件重新渲染都会添加新的监听器
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空数组表示只添加一次监听器
  
  return (
    <div>
      <p>窗口宽度：{size.width}px</p>
      <p>窗口高度：{size.height}px</p>
    </div>
  );
}

function SearchResults({ query, category }) {
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    // 如果查询为空，不发送请求
    if (!query) {
      setResults([]);
      return;
    }
    
    const fetchResults = async () => {
      setLoading(true);
      try {
        // 同时使用 query 和 category 进行搜索
        const response = await fetch(
          `/api/search?q=${query}&category=${category}`
        );
        const data = await response.json();
        setResults(data);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchResults();
  }, [query, category]); // 依赖两个值，任意一个变化都会重新搜索
  
  if (loading) return <div>搜索中...</div>;
  
  return (
    <ul>
      {results.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

function SearchInput() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    // 如果查询为空，清空结果
    if (!query) {
      setResults([]);
      return;
    }
    
    // 设置延迟，500ms 后才发送请求
    const timer = setTimeout(() => {
      console.log('发送搜索请求：', query);
      // 这里发送请求
      fetch(`/api/search?q=${query}`)
        .then(res => res.json())
        .then(data => setResults(data));
    }, 500);
    
    // 清理函数：如果用户继续输入，取消上一次的定时器
    // 这样只有用户停止输入 500ms 后才会发送请求
    return () => {
      clearTimeout(timer);
    };
  }, [query]); // query 变化时，重新设置定时器
  
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="输入搜索内容"
      />
      <ul>
        {results.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

function ThemeToggle() {
  const [theme, setTheme] = useState(() => {
    // 初始化时从 localStorage 读取
    return localStorage.getItem('theme') || 'light';
  });
  
  useEffect(() => {
    // 每次 theme 变化时，保存到 localStorage
    localStorage.setItem('theme', theme);
    
    // 同时更新 body 的 class
    document.body.className = theme;
  }, [theme]);
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      切换主题（当前：{theme}）
    </button>
  );
}

// ❌ 错误1：忘记添加依赖项
useEffect(() => {
  fetchData(userId); // 使用了 userId
}, []); // 但依赖数组是空的，userId 变化时不会重新执行

// ✅ 正确
useEffect(() => {
  fetchData(userId);
}, [userId]); // 添加 userId 到依赖数组

// ❌ 错误2：在 useEffect 中直接修改 state
useEffect(() => {
  count = count + 1; // 错误！
}, []);

// ✅ 正确
useEffect(() => {
  setCount(prev => prev + 1); // 使用 setState
}, []);

// ❌ 错误3：忘记清理副作用
useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);
  // 忘记返回清理函数，定时器会一直运行
}, []);

// ✅ 正确
useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);
  return () => clearInterval(timer); // 清理定时器
}, []);

// ❌ 错误4：useEffect 回调直接使用 async
useEffect(async () => { // 错误！
  const data = await fetchData();
}, []);

// ✅ 正确：在内部定义 async 函数
useEffect(() => {
  const fetchData = async () => {
    const data = await fetch('/api/data');
  };
  fetchData();
}, []);

function LifecycleDemo() {
  const [count, setCount] = useState(0);
  
  console.log('1. 组件渲染');
  
  useEffect(() => {
    console.log('2. useEffect 执行（无依赖）');
  });
  
  useEffect(() => {
    console.log('3. useEffect 执行（空依赖）');
    return () => {
      console.log('4. 清理函数执行（组件卸载时）');
    };
  }, []);
  
  useEffect(() => {
    console.log('5. useEffect 执行（count 依赖）', count);
    return () => {
      console.log('6. 清理函数执行（count 变化前）');
    };
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      点击 {count} 次
    </button>
  );
}

// 首次渲染输出：
// 1. 组件渲染
// 3. useEffect 执行（空依赖）
// 5. useEffect 执行（count 依赖） 0
// 2. useEffect 执行（无依赖）

// 点击按钮后输出：
// 1. 组件渲染
// 6. 清理函数执行（count 变化前）
// 5. useEffect 执行（count 依赖） 1
// 2. useEffect 执行（无依赖）

import { createContext, useContext, useState } from 'react';

// 1. 创建 Context（创建一个数据通道）
const ThemeContext = createContext();
const UserContext = createContext();

// 2. 提供 Context（在顶层组件提供数据）
function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState({ name: '张三' });
  
  return (
    // Provider 组件用于提供数据，value 是要传递的数据
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={{ user, setUser }}>
        {/* 所有子组件都可以访问这些数据，无需通过 props 逐层传递 */}
        <Header />
        <Content />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

// 3. 消费 Context（在任意深层子组件中使用数据）
function Header() {
  // 使用 useContext 获取 Context 中的数据
  const { theme, setTheme } = useContext(ThemeContext);
  const { user } = useContext(UserContext);
  
  return (
    <header>
      <p>当前主题：{theme}</p>
      <p>用户：{user.name}</p>
      {/* 可以直接修改顶层的状态 */}
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换主题
      </button>
    </header>
  );
}

import { useReducer } from 'react';

// 1. 定义 reducer 函数（纯函数，根据 action 返回新的 state）
// state: 当前状态
// action: 动作对象，包含 type（动作类型）和可选的 payload（数据）
function reducer(state, action) {
  // 根据不同的 action.type 返回不同的新状态
  switch (action.type) {
    case 'increment':
      // 返回新的状态对象（count + 1）
      return { count: state.count + 1 };
    case 'decrement':
      // 返回新的状态对象（count - 1）
      return { count: state.count - 1 };
    case 'reset':
      // 重置为初始值
      return { count: 0 };
    default:
      // 未知的 action 类型，抛出错误
      throw new Error('Unknown action');
  }
}

// 2. 使用 useReducer
function Counter() {
  // useReducer 返回 [当前状态, dispatch 函数]
  // dispatch 函数用于触发状态更新
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  
  return (
    <div>
      <p>计数：{state.count}</p>
      {/* 调用 dispatch 并传入 action 对象来更新状态 */}
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
      <button onClick={() => dispatch({ type: 'reset' })}>重置</button>
    </div>
  );
}

import { useRef, useEffect } from 'react';

function TextInput() {
  // 创建一个 ref 对象，初始值为 null
  const inputRef = useRef(null);
  // 创建一个用于保存计数的 ref（不会触发重新渲染）
  const countRef = useRef(0);
  
  useEffect(() => {
    // 通过 ref.current 访问 DOM 元素
    // 自动聚焦到输入框
    inputRef.current.focus();
  }, []);
  
  const handleClick = () => {
    // 访问 DOM 元素的值
    console.log(inputRef.current.value);
    
    // 修改 ref 的值不会触发组件重新渲染
    // 适合保存不需要触发渲染的数据（如定时器 ID、上一次的值等）
    countRef.current += 1;
    console.log('点击次数：', countRef.current);
  };
  
  return (
    <div>
      {/* 将 ref 绑定到 DOM 元素 */}
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>提交</button>
    </div>
  );
}

import { useMemo, useState } from 'react';

function ExpensiveComponent({ items }) {
  const [count, setCount] = useState(0);
  
  // useMemo 会缓存计算结果
  // 只有当依赖项 items 变化时，才会重新计算
  // 如果 items 没变，直接返回上次缓存的结果
  const total = useMemo(() => {
    console.log('计算总价...'); // 只有在 items 变化时才会打印
    // 遍历所有商品，累加价格
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]); // 依赖数组：只有 items 变化时才重新计算
  
  // 注意：点击按钮改变 count 时，total 不会重新计算
  // 因为 items 没有变化，useMemo 会直接返回缓存的值
  
  return (
    <div>
      <p>总价：¥{total}</p>
      <p>计数：{count}</p>
      {/* 点击这个按钮不会触发 total 重新计算 */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

import { useCallback, useState, memo } from 'react';

// 使用 memo 包裹子组件，只有 props 变化时才重新渲染
const Button = memo(({ onClick, children }) => {
  console.log('Button 渲染');
  return <button onClick={onClick}>{children}</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  
  // 问题：如果不使用 useCallback，每次 Parent 渲染时都会创建新的 handleClick 函数
  // 新函数 !== 旧函数，导致 Button 组件认为 props 变化了，从而重新渲染
  
  // 解决：使用 useCallback 缓存函数引用
  // 只有当依赖项 count 变化时，才会创建新函数
  const handleClick = useCallback(() => {
    console.log('点击了', count);
  }, [count]); // 依赖数组：只有 count 变化时才创建新函数
  
  return (
    <div>
      {/* 输入文字时，text 变化，Parent 重新渲染 */}
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      
      {/* 因为 handleClick 被缓存了，输入文字时 Button 不会重新渲染 */}
      <Button onClick={handleClick}>子组件按钮</Button>
    </div>
  );
}

// useLocalStorage - 持久化状态到本地存储
function useLocalStorage(key, initialValue) {
  // 初始化状态：从 localStorage 读取，如果没有则使用初始值
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    // 如果 localStorage 中有值，解析 JSON；否则使用初始值
    return stored ? JSON.parse(stored) : initialValue;
  });
  
  // 每当 value 变化时，同步到 localStorage
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  // 返回值和更新函数，用法和 useState 一样
  return [value, setValue];
}

// 使用自定义 Hook
function App() {
  // 用法和 useState 完全一样，但数据会自动保存到 localStorage
  const [name, setName] = useLocalStorage('name', '');
  
  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="输入姓名（会自动保存）"
    />
  );
}

// useFetch - 封装数据请求逻辑
function useFetch(url) {
  // 定义三个状态：数据、加载中、错误
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // 定义异步请求函数
    const fetchData = async () => {
      try {
        setLoading(true); // 开始加载
        const response = await fetch(url);
        const json = await response.json();
        setData(json); // 保存数据
      } catch (err) {
        setError(err); // 保存错误
      } finally {
        setLoading(false); // 结束加载
      }
    };
    
    fetchData();
  }, [url]); // url 变化时重新请求
  
  // 返回三个状态，让组件可以根据不同状态显示不同内容
  return { data, loading, error };
}

// 使用自定义 Hook
function UserList() {
  // 调用自定义 Hook，获取数据、加载状态、错误信息
  const { data, loading, error } = useFetch('/api/users');
  
  // 根据不同状态显示不同内容
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;
  
  // 数据加载成功，显示列表
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

function Parent() {
  const user = { name: '张三', age: 20 };
  
  return <Child user={user} onUpdate={handleUpdate} />;
}

function Child({ user, onUpdate }) {
  return (
    <div>
      <p>{user.name} - {user.age}岁</p>
      <button onClick={onUpdate}>更新</button>
    </div>
  );
}

function Parent() {
  const [message, setMessage] = useState('');
  
  const handleMessage = (msg) => {
    setMessage(msg);
  };
  
  return (
    <div>
      <p>来自子组件：{message}</p>
      <Child onSend={handleMessage} />
    </div>
  );
}

function Child({ onSend }) {
  const [input, setInput] = useState('');
  
  const handleClick = () => {
    onSend(input);
  };
  
  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleClick}>发送</button>
    </div>
  );
}

const MessageContext = createContext();

function App() {
  const [message, setMessage] = useState('Hello');
  
  return (
    <MessageContext.Provider value={{ message, setMessage }}>
      <Parent />
    </MessageContext.Provider>
  );
}

function Parent() {
  return <Child />;
}

function Child() {
  const { message, setMessage } = useContext(MessageContext);
  
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage('World')}>改变</button>
    </div>
  );
}

// 默认插槽
function Card({ children, title }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </div>
  );
}

// 使用
<Card title="标题">
  <p>这是内容</p>
  <button>按钮</button>
</Card>

// 具名插槽
function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

// 使用
<Layout
  header={<h1>页头</h1>}
  footer={<p>页脚</p>}
>
  <p>主要内容</p>
</Layout>

function Form() {
  // 使用一个对象管理所有表单字段
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    gender: 'male',
    hobbies: [],
    agree: false,
  });
  
  // 统一的处理函数，适用于所有输入类型
  const handleChange = (e) => {
    // 解构获取输入框的属性
    const { name, value, type, checked } = e.target;
    
    // 更新状态：使用计算属性名 [name] 动态更新对应字段
    setFormData({
      ...formData, // 保留其他字段
      // 如果是 checkbox，使用 checked；否则使用 value
      [name]: type === 'checkbox' ? checked : value,
    });
  };
  
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    console.log('提交：', formData);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* 文本输入：value 绑定状态，onChange 更新状态 */}
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
        placeholder="用户名"
      />
      
      {/* 邮箱输入 */}
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="邮箱"
      />
      
      {/* 下拉选择：value 绑定当前选中的值 */}
      <select name="gender" value={formData.gender} onChange={handleChange}>
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
      
      {/* 复选框：checked 绑定布尔值 */}
      <label>
        <input
          name="agree"
          type="checkbox"
          checked={formData.agree}
          onChange={handleChange}
        />
        同意条款
      </label>
      
      <button type="submit">提交</button>
    </form>
  );
}

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/users">用户</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

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

function Home() {
  const navigate = useNavigate();
  
  const goToAbout = () => {
    navigate('/about');
  };
  
  const goToUser = (id) => {
    navigate(`/users/${id}`);
  };
  
  const goBack = () => {
    navigate(-1); // 返回上一页
  };
  
  return (
    <div>
      <button onClick={goToAbout}>跳转到关于</button>
      <button onClick={() => goToUser(123)}>查看用户123</button>
      <button onClick={goBack}>返回</button>
    </div>
  );
}

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

function UserDetail() {
  // 路径参数：/users/:id
  const { id } = useParams();
  
  // 查询参数：/users/123?tab=profile&page=2
  const [searchParams, setSearchParams] = useSearchParams();
  const tab = searchParams.get('tab');
  const page = searchParams.get('page');
  
  return (
    <div>
      <p>用户 ID: {id}</p>
      <p>Tab: {tab}</p>
      <p>Page: {page}</p>
      <button onClick={() => setSearchParams({ tab: 'posts', page: '1' })}>
        切换参数
      </button>
    </div>
  );
}

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users" element={<Users />}>
          <Route path=":id" element={<UserDetail />} />
        </Route>
      </Route>
    </Routes>
  );
}

function Layout() {
  return (
    <div>
      <nav>导航栏</nav>
      <Outlet /> {/* 子路由渲染位置 */}
      <footer>页脚</footer>
    </div>
  );
}

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

function PrivateRoute({ children }) {
  const isAuthenticated = localStorage.getItem('token');
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
}

// 使用
<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import userReducer from './userSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer,
  },
});

// App.js
import { Provider } from 'react-redux';
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1; // 可以直接修改（内部使用 Immer）
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
    reset: (state) => {
      state.value = 0;
    },
  },
});

export const { increment, decrement, incrementByAmount, reset } = counterSlice.actions;
export default counterSlice.reducer;

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './store/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
}