react实现界面切换效果

使用React Router实现页面切换

React Router是React生态中最常用的路由库，用于实现单页应用（SPA）的页面切换效果。安装最新版本：

npm install react-router-dom

基础路由配置示例：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

添加过渡动画效果

使用Framer Motion库可以轻松实现平滑的过渡效果：

npm install framer-motion

页面切换动画实现：

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence mode="wait">
  <motion.div
    key={location.pathname}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 0.5 }}
  >
    <Routes location={location}>
      {/* 路由配置 */}
    </Routes>
  </motion.div>
</AnimatePresence>

嵌套路由实现局部更新

React Router支持嵌套路由，可以实现局部内容切换：

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route index element={<DashboardHome />} />
    <Route path="settings" element={<DashboardSettings />} />
  </Route>
</Routes>

// Dashboard组件内需要放置<Outlet />来渲染子路由

路由守卫实现权限控制

通过自定义路由组件实现权限验证：

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />

动态路由匹配

使用参数化路由实现动态路径：

<Route path="/users/:userId" element={<UserProfile />} />

// 在组件中获取参数
const { userId } = useParams();

保持页面状态

使用React Router的keep-alive替代方案保持组件状态：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="products" element={
      <KeepAlive cacheKey="products">
        <Products />
      </KeepAlive>
    }/>
  </Route>
</Routes>

路由懒加载优化性能

使用React.lazy实现代码分割：

const AboutPage = React.lazy(() => import('./AboutPage'));

<Suspense fallback={<LoadingSpinner />}>
  <Routes>
    <Route path="/about" element={<AboutPage />} />
  </Routes>
</Suspense>

自定义切换过渡效果

结合CSS实现特定过渡效果：

.page-enter {
  opacity: 0;
  transform: translateX(100%);
}
.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}
.page-exit {
  opacity: 1;
  transform: translateX(0);
}
.page-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 500ms;
}

路由切换事件监听

监听路由变化执行特定操作：

const location = useLocation();

useEffect(() => {
  // 路由变化时执行的操作
  trackPageView(location.pathname);
}, [location]);