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]);
