使用react如何跳转页面
使用React Router进行页面跳转
React中实现页面跳转通常使用react-router-dom库，以下是具体实现方法：
安装react-router-dom：
npm install react-router-dom声明式导航（使用Link组件）
在需要跳转的地方使用Link组件：
import { Link } from 'react-router-dom';
function NavBar() {
return (
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}编程式导航（使用useNavigate钩子）
在函数组件中使用useNavigate进行编程式导航：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
// 跳转到指定路径
navigate('/profile');
// 带参数跳转
navigate('/user/123');
// 替换当前历史记录
navigate('/login', { replace: true });
// 带state跳转
navigate('/dashboard', { state: { from: 'home' } });
};
return <button onClick={handleClick}>Go to Profile</button>;
}路由配置
在应用入口文件中配置路由：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/user/:id" element={<UserPage />} />
</Routes>
</Router>
);
}动态路由参数获取
在目标页面组件中获取路由参数：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}重定向
使用Navigate组件实现重定向：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}404页面处理
在路由配置最后添加404路由：
<Route path="*" element={<NotFoundPage />} />以上方法涵盖了React中页面跳转的主要场景，根据具体需求选择合适的方式即可。
