当前位置：首页 > React

react 实现app切换效果

2026-01-27 19:12:45React

React 实现 App 切换效果

使用 React Router 实现页面切换

React Router 是实现页面切换效果的核心工具，适用于单页应用（SPA）的路由管理。安装依赖包：

npm install react-router-dom

基础路由配置示例：

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

添加过渡动画效果

使用 react-transition-group 实现平滑的切换动画：

npm install react-transition-group

结合 React Router 的示例代码：

import { CSSTransition, TransitionGroup } from 'react-transition-group';

function AnimatedRoutes() {
  const location = useLocation();
  return (
    <TransitionGroup>
      <CSSTransition key={location.key} classNames="fade" timeout={300}>
        <Routes location={location}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </CSSTransition>
    </TransitionGroup>
  );
}

配套 CSS 样式：

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

移动端专属切换效果

实现类似原生 App 的滑动切换效果，可使用 react-swipeable：

npm install react-swipeable

示例实现左右滑动切换：

import { useSwipeable } from 'react-swipeable';

function SwipeableComponent() {
  const [pageIndex, setPageIndex] = useState(0);
  const handlers = useSwipeable({
    onSwipedLeft: () => setPageIndex(prev => Math.min(prev + 1, 2)),
    onSwipedRight: () => setPageIndex(prev => Math.max(prev - 1, 0))
  });

  return (
    <div {...handlers}>
      {pageIndex === 0 && <Home />}
      {pageIndex === 1 && <About />}
      {pageIndex === 2 && <Contact />}
    </div>
  );
}

状态管理优化

对于复杂的状态共享场景，结合 Context API 或 Redux 管理切换状态：

const AppContext = createContext();

function AppProvider({ children }) {
  const [currentView, setCurrentView] = useState('home');
  return (
    <AppContext.Provider value={{ currentView, setCurrentView }}>
      {children}
    </AppContext.Provider>
  );
}

function ViewSwitcher() {
  const { currentView } = useContext(AppContext);
  return (
    <>
      {currentView === 'home' && <Home />}
      {currentView === 'about' && <About />}
    </>
  );
}

react 实现app切换效果