react如何跳转页面
使用React Router进行页面跳转
React Router是React生态中最常用的路由管理库，适用于单页应用（SPA）的页面跳转。需要安装react-router-dom（针对Web应用）：
npm install react-router-dom在项目入口文件（如App.js）中配置路由：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}通过Link组件或useNavigate钩子实现跳转：
// 使用Link组件（类似<a>标签）
import { Link } from 'react-router-dom';
<Link to="/about">关于我们</Link>
// 使用useNavigate钩子（编程式导航）
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/about');通过window.location跳转（非SPA场景）
适用于传统多页应用或需要完全刷新页面的场景：
window.location.href = '/about'; // 跳转并刷新页面
window.location.replace('/about'); // 替换当前历史记录注意：这种方式会导致整个页面重新加载，破坏React的单页应用体验。
使用锚点实现页面内跳转
对于同一页面内的章节跳转，可直接使用HTML锚点：
<a href="#section1">跳转到第一节</a>
<div id="section1">...</div>React Router也支持通过useNavigate实现锚点跳转：
const navigate = useNavigate();
navigate('#section1');路由传参的三种方式
通过URL参数传递数据：
// 1. 动态路由参数
navigate('/user/123'); // 路由配置 path="/user/:id"
// 2. 查询参数
navigate('/search?keyword=react');
// 3. state传参（不会显示在URL中）
navigate('/profile', { state: { user: 'admin' } });获取参数的方式：
// 动态参数和查询参数
const { id } = useParams();
const [searchParams] = useSearchParams();
// state参数
const { state } = useLocation();路由跳转的扩展功能
实现导航守卫（如登录验证）：
// 在路由配置中使用高阶组件
const PrivateRoute = ({ children }) => {
const isAuth = checkAuth();
return isAuth ? children : <Navigate to="/login" />;
};
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />实现懒加载路由提升性能：
const About = lazy(() => import('./About'));
<Suspense fallback={<Loading />}>
<Route path="/about" element={<About />} />
</Suspense>
