react如何进行页面跳转
使用 React Router 进行页面跳转
React Router 是 React 生态中最常用的路由管理库，支持声明式和编程式导航。
安装 React Router：
npm install react-router-dom声明式导航（Link 组件）
使用 <Link> 组件实现页面跳转，类似于 HTML 的 <a> 标签，但不会触发页面刷新。
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">跳转到 About 页面</Link>
);
}编程式导航（useNavigate Hook）
在函数组件中，可以通过 useNavigate Hook 实现编程式跳转。
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 跳转到 About 页面
navigate('/about', { replace: true }); // 替换当前历史记录
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}路由参数传递
跳转时可以传递参数，通过 state 或 URL 参数实现。
// 通过 state 传递参数
navigate('/user', { state: { id: 123 } });
// 通过 URL 参数传递
navigate('/user/123');类组件中的导航
在类组件中，可以通过 withRouter 高阶组件或使用 history 对象。
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/about');
};
render() {
return <button onClick={this.handleClick}>跳转</button>;
}
}
export default withRouter(MyComponent);动态路由匹配
在路由配置中定义动态参数，通过 useParams Hook 获取。
// 路由配置
<Route path="/user/:id" element={<UserPage />} />
// 在 UserPage 组件中获取参数
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}重定向
使用 <Navigate> 组件或 navigate 函数实现重定向。
import { Navigate } from 'react-router-dom';
function ProtectedRoute() {
const isAuth = false;
return isAuth ? <Dashboard /> : <Navigate to="/login" />;
}
