react如何页面跳转
使用 React Router 进行页面跳转
React Router 是 React 生态中最常用的路由管理库，适用于单页面应用（SPA）的导航和跳转。以下是常见的几种跳转方式：
安装 React Router
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 组件跳转
Link 是 React Router 提供的导航组件，不会触发页面刷新：
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to="/about">跳转到 About 页</Link>
</div>
);
}通过编程式导航跳转
使用 useNavigate Hook 在事件中跳转：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 跳转到 About 页
// navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}通过 Redirect 组件跳转（v5 及以下）
在 React Router v6 中已移除 Redirect，改用 Navigate：
import { Navigate } from 'react-router-dom';
function ProtectedRoute() {
const isAuth = false;
return isAuth ? <Dashboard /> : <Navigate to="/login" />;
}动态路由跳转
传递参数并跳转到动态路由：
navigate('/user/123'); // 跳转到动态路由 /user/:id
// 获取参数：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}跳转时传递状态
通过 state 传递数据：
navigate('/about', { state: { fromHome: true } });
// 接收状态：
import { useLocation } from 'react-router-dom';
function About() {
const location = useLocation();
console.log(location.state.fromHome); // true
}使用 NavLink 高亮当前链接
NavLink 可自动添加激活状态的类名：
import { NavLink } from 'react-router-dom';
<NavLink
to="/about"
className={({ isActive }) => isActive ? 'active' : ''}
>
About
</NavLink>注意事项
- React Router v6 移除了
useHistory，改用useNavigate。 - 确保跳转逻辑在组件渲染周期外调用（如事件回调中）。
- 动态路由参数需在目标组件中通过
useParams获取。
通过以上方法可以实现 React 应用的页面跳转，具体选择取决于场景需求。
