要實現React中的滑動切換頁面，你可以使用React的事件處理和CSS的過渡效果來實現。下面是一個簡單的示例：

1. 首先，你需要在React組件中設置一個狀態來跟蹤當前頁面的索引：

import React, { useState } from "react";

const App = () => {
  const [currentPage, setCurrentPage] = useState(0);

  // ...

  return (
    <div>
      {/* 頁面內容 */}
    </div>
  );
};

export default App;

2. 接下來，你可以使用React的事件處理函數來處理滑動事件。你可以使用touchstart、touchmove和touchend事件來檢測用戶的滑動動作，并根據滑動的距離來判斷是否切換頁面：

import React, { useState } from "react";

const App = () => {
  const [currentPage, setCurrentPage] = useState(0);

  const handleTouchStart = (e) => {
    // 記錄滑動開始時的觸摸位置
  };

  const handleTouchMove = (e) => {
    // 計算滑動的距離
    // 根據滑動距離來判斷是否切換頁面
  };

  const handleTouchEnd = (e) => {
    // 清除觸摸位置記錄
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {/* 頁面內容 */}
    </div>
  );
};

export default App;

3. 在滑動切換頁面時，你可以使用CSS的過渡效果來實現動畫效果。你可以使用React的條件渲染來根據當前頁面的索引來顯示不同的頁面，并使用CSS的transition屬性來添加過渡效果：

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [currentPage, setCurrentPage] = useState(0);

  const handleTouchStart = (e) => {
    // 記錄滑動開始時的觸摸位置
  };

  const handleTouchMove = (e) => {
    // 計算滑動的距離
    // 根據滑動距離來判斷是否切換頁面
  };

  const handleTouchEnd = (e) => {
    // 清除觸摸位置記錄
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      className="slider-container"
      style={{
        transform: `translateX(-${currentPage * 100}%)`,
        transition: "transform 0.3s ease-in-out",
      }}
    >
      {/* 第一頁 */}
      <div className="page">Page 1</div>
      {/* 第二頁 */}
      <div className="page">Page 2</div>
      {/* 第三頁 */}
      <div className="page">Page 3</div>
    </div>
  );
};

export default App;

4. 最后，你需要添加一些CSS樣式來定義頁面容器和頁面的樣式，以及過渡效果的樣式：

.slider-container {
  display: flex;
  width: 300%;
}

.page {
  width: 33.33%;
}

.page:nth-child(1) {
  background-color: #ff0000;
}

.page:nth-child(2) {
  background-color: #00ff00;
}

.page:nth-child(3) {
  background-color: #0000ff;
}

通過上述步驟，你就可以實現在React中滑動切換頁面的效果了。當用戶滑動屏幕時，頁面會根據滑動的距離進行切換，并添加過渡效果使切換更流暢。