使用react如何跳转页面
使用 React Router 进行页面跳转
React 应用中通常使用 react-router-dom 库实现页面跳转。以下是几种常见的跳转方式：
安装依赖
npm install react-router-dom使用 Link 组件跳转
Link 是 react-router-dom 提供的组件，用于声明式导航，类似于 HTML 的 <a> 标签但不会触发页面刷新。
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">跳转到 About 页面</Link>
);
}使用 useNavigate Hook 跳转
useNavigate 是 React Router v6 提供的 Hook，适用于函数组件中的编程式导航。
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 跳转到 About 页面
// navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}使用 Navigate 组件重定向
Navigate 组件用于条件渲染时自动重定向，例如登录状态判断。
import { Navigate } from 'react-router-dom';
function PrivateRoute({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}路由配置基础示例
在根组件中配置路由，确保跳转功能正常。
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</BrowserRouter>
);
}传递状态参数
跳转时可携带状态参数，目标页面通过 useLocation 获取。
// 跳转时传递参数
navigate('/user', { state: { id: 123 } });
// 目标页面接收参数
import { useLocation } from 'react-router-dom';
const location = useLocation();
console.log(location.state.id); // 123动态路由跳转
通过冒号 : 定义动态路由参数，跳转时传递实际值。
// 路由配置
<Route path="/user/:userId" element={<UserPage />} />
// 跳转代码
navigate('/user/456'); // UserPage 可通过 useParams() 获取 userId以上方法覆盖了 React 中页面跳转的主要场景，根据实际需求选择合适的方式即可。注意 React Router v6 与 v5 的 API 存在差异，示例均基于 v6 版本。
