react如何页面跳转
使用 React Router 进行页面跳转
React Router 是 React 中实现页面跳转的常用库，支持声明式和编程式导航。
安装 React Router：
npm install react-router-dom在项目中引入并使用：
import { BrowserRouter as Router, Route, Link, useNavigate } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Link to="/home">Home</Link>
<Route path="/home" component={Home} />
</div>
</Router>
);
}声明式导航
使用 Link 组件实现声明式导航：
<Link to="/about">About</Link>编程式导航
使用 useNavigate 钩子实现编程式导航：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/profile');
};
return <button onClick={handleClick}>Go to Profile</button>;
}路由参数传递
通过 URL 传递参数：
navigate('/user/123');在目标组件中获取参数：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}重定向
使用 Navigate 组件实现重定向：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}嵌套路由
配置嵌套路由：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
</Route>以上方法覆盖了 React 中页面跳转的主要场景，根据具体需求选择合适的方式。
