react中页面如何实现跳转
路由跳转（React Router）
在React中实现页面跳转通常使用React Router库。React Router提供了<Link>组件和useNavigate钩子来实现导航功能。
安装React Router：
npm install react-router-dom使用<Link>组件：
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">关于我们</Link>
);
}使用useNavigate钩子：
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/about')}>
跳转到关于页面
</button>
);
}编程式导航
通过编程方式控制导航，可以使用useNavigate钩子提供的各种方法：
const navigate = useNavigate();
// 基本跳转
navigate('/target-path');
// 替换当前历史记录
navigate('/target-path', { replace: true });
// 带状态的跳转
navigate('/target-path', {
state: { from: 'current-page' }
});
// 前进/后退
navigate(1); // 前进
navigate(-1); // 后退动态路由跳转
处理动态路由参数时，可以使用模板字符串或对象形式：
// 跳转到用户详情页
navigate(`/user/${userId}`);
// 或者使用对象形式
navigate({
pathname: '/user',
search: `?id=${userId}`
});路由配置
需要在应用顶层配置路由：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/user/:id" element={<UserPage />} />
</Routes>
</BrowserRouter>
);
}重定向处理
使用<Navigate>组件实现条件重定向：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated, children }) {
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return children;
}路由守卫
实现认证检查等路由守卫功能：
function PrivateRoute() {
const auth = useAuth();
const location = useLocation();
if (!auth.user) {
return <Navigate to="/login" state={{ from: location }} />;
}
return <Outlet />;
}路由传参
通过多种方式传递参数：
// 通过state传递
navigate('/target', { state: { data: value } });
// 通过URL参数传递
navigate('/target?key=value');
// 在目标组件中获取
const location = useLocation();
const stateData = location.state?.data;
const searchParams = new URLSearchParams(location.search);
const paramValue = searchParams.get('key');路由动画
为路由跳转添加过渡动画：
import { AnimatePresence, motion } from 'framer-motion';
<AnimatePresence>
<Routes location={location} key={location.key}>
<Route path="/" element={
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<HomePage />
</motion.div>
} />
</Routes>
</AnimatePresence>嵌套路由
实现嵌套路由结构：
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Routes>在Layout组件中使用<Outlet />渲染子路由：
function Layout() {
return (
<div>
<Navbar />
<Outlet />
<Footer />
</div>
);
}
