react如何实现界面跳转
路由库的选择
React本身不包含内置路由功能，需要借助第三方库。react-router-dom是当前最主流的选择，适用于Web应用。对于React Native项目，需使用react-router-native。
基本路由配置
安装react-router-dom后，在入口文件或根组件中配置路由。BrowserRouter或HashRouter作为顶层组件包裹应用，Route组件定义路径与组件的映射关系。
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</BrowserRouter>
);
}导航方式实现
使用Link组件实现声明式导航，适合菜单或按钮跳转。编程式导航通过useNavigate钩子实现，适用于表单提交等场景。
import { Link, useNavigate } from 'react-router-dom';
// 声明式导航
<Link to="/about">关于我们</Link>
// 编程式导航
const navigate = useNavigate();
navigate('/contact', { state: { fromDashboard: true } });动态路由与参数传递
通过冒号语法定义动态段，useParams获取参数。state属性可传递复杂对象，useLocation读取。
<Route path="/users/:id" element={<UserDetail />} />
// 组件内获取参数
const { id } = useParams();
const location = useLocation();
const stateData = location.state;嵌套路由布局
通过Outlet组件实现嵌套视图，父路由定义子路由出口。保持布局结构同时切换子内容。
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
<Route path="settings" element={<DashboardSettings />} />
</Route>
// DashboardLayout组件包含
<Outlet />路由守卫与权限控制
封装自定义路由组件，结合认证状态实现权限控制。未登录用户重定向到登录页。
function PrivateRoute({ children }) {
const auth = useAuth();
return auth ? children : <Navigate to="/login" />;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />404页面处理
通配符路径匹配所有未定义路由，展示自定义404组件。需放在路由配置最后。
<Route path="*" element={<NotFoundPage />} />路由动画过渡
结合react-transition-group或Framer Motion实现转场动画。通过监听location变化触发动画效果。
import { AnimatePresence } from 'framer-motion';
<AnimatePresence mode="wait">
<Routes location={location} key={location.key}>
{/* 路由配置 */}
</Routes>
</AnimatePresence>
